Hello, and thanks in advance for your replies helping me with these problems I am having. To those who help me, I will be sure to leave you positive talkupation for your volunteered assistance.

The problem lays within my Pontiac Grand Am site. Whenever I have bullets, or a list, it shows up odd in both FireFox and IE.

First off, the bullets should be indented to the right more than the paragraph left-text starts. In IE, for some reason, my bullets go the opposite way (to the left). In FireFox, my bullets just stay aligned with the <p>'s of my page vertically.

Please assist. I know this is a CSS problem of mine.
Thank you!

Oh by the way, you can view some examples of bulleted items by viewing my source code of my Pontiac Grand Am Information page.

You just have to modify your CSS on the lists. You have the ul and the li with the same rules.. change that to something like this and you'll have a better indent:

ul {
color: #fff;
list-style-type: disc;
margin-left: 15px;
padding-left: 10px;
}

ul li{
padding-left: 5px;
margin-left: 30px;
}

That will work great for all but .. IE
You're going to need conditional comments and a separate css file to deal only with the fixes needed to make IE behave.

I would also suggest that you wrap everything to the right of your menu area in a div and push it where you need it with margins. Then the UL will position from the containing div instead of the far left side of the page as it is now.

Originally Posted by LadynRed

You just have to modify your CSS on the lists. You have the ul and the li with the same rules.. change that to something like this and you'll have a better indent:

ul {
color: #fff;
list-style-type: disc;
margin-left: 15px;
padding-left: 10px;
}

ul li{
padding-left: 5px;
margin-left: 30px;
}

That will work great for all but .. IE
You're going to need conditional comments and a separate css file to deal only with the fixes needed to make IE behave.

I would also suggest that you wrap everything to the right of your menu area in a div and push it where you need it with margins. Then the UL will position from the containing div instead of the far left side of the page as it is now.

Everything to the right of the menu is in its own div within the menu's div, it's id is content. Will try that list fix code...please someone help me make it work with IE though.

Man...IE is totally f***ing up.
IE randomly puts the divs overtop each other sometimes...then you can refresh the page and see it normally.

On top of that, the bullets for lists are still to the right. Your code fixed the issue with FireFox...just how the hell do I get this working with IE, though?

I wish Microsoft made a good browser...I hate having to face with IE compatibility issues when the **** browser doesn't read proper coding correctly.

Just so I know what you're talking about: I'm looking at it on IE7 and it looks fine to me. Is this IE6 you're talking about?

Originally Posted by ADAM Web Design

Just so I know what you're talking about: I'm looking at it on IE7 and it looks fine to me. Is this IE6 you're talking about?

I am using IE7 also.

Yeah.. IE 6 is a royal pain to deal with and since it's still being used by a LOT of people, you just have to learn to deal with it.

Adam, in IE 6 the list is screwed up.

Everything to the right of the menu is in its own div within the menu's div, it's id is content.

Take #content OUT of the menu div so that it stands on it's own.

Originally Posted by LadynRed

Yeah.. IE 6 is a royal pain to deal with and since it's still being used by a LOT of people, you just have to learn to deal with it.

Adam, in IE 6 the list is screwed up.

Take #content OUT of the menu div so that it stands on it's own.

I can't, because then it'll go below the menu, which is not what I want. =\

Of course you can !
It goes below the menu because of 1 of 2 things:
You have not cleared a float ,
or, in IE, the sum total of the widths of #menu and #content, including margin and padding is too wide for the containing element. IE has a seriously busted box model which we all must deal with.

In your case, your widths are too wide to fit.

I made the following changes to your code to show you how the content box can sit BESIDE the #menu. I also added a #wrapper to contain EVERYTHING else.

<div id="wrapper">
<h1><span style="color: rgb(254, 0, 0);">Pontiac</span> <span style="font-style: italic;">Grand Am</span> Owners Resource</h1>

<div id="menu">
Main Menu<br>
<a href="http://www.grandayum.com/index.html" title="Pontiac Grand Am Owners Resource">Home Page</a><br>
<a href="http://www.grandayum.com/grand-am-information.html" title="Pontiac Grand Am Information">Grand Am Info</a><br>
<a href="http://www.grandayum.com/grand-am-videos.html" title="Pontiac Grand Am Videos">Grand Am Vids</a><br>
<a href="http://www.grandayum.com/grand-am-appearance-modifications.html" title="Pontiac Grand Am Appearance Modifications">Appearance Mods</a><br>
<a href="http://www.grandayum.com/grand-am-performance-modifications.html" title="Pontiac Grand Am Performance Modifications">Performance Mods</a><br><br>
Appearance Mods<br>
<br><br>
Performance Mods<br>
<a href="http://www.grandayum.com/grand-am-62mm-throttle-body.html" title="62mm Throttle Body for the Pontiac Grand Am">62mm Throttle Body</a><br>
<a href="http://www.grandayum.com/grand-am-cat-back-exhaust-system.html" title="Cat-Back Exhaust Systems for the Pontiac Grand Am">Cat-Back Exhaust</a><br>
<a href="http://www.grandayum.com/grand-am-cold-air-intake.html" title="Cold Air Intake Systems for the Pontiac Grand Am">Cold Air Intake</a><br>
<a href="http://www.grandayum.com/grand-am-header-manifold.html" title="Headers and Manifolds for the Pontiac Grand Am">Headers/Manifolds</a><br>
<a href="http://www.grandayum.com/grand-am-nitrous-kit.html" title="Nitrous Kits for the Pontiac Grand Am">Nitrous Kits</a><br>
<a href="http://www.grandayum.com/grand-am-pcm.html" title="Programmed Engine Control Unit (PCM) for the Pontiac Grand Am">PCM</a><br>
<a href="http://www.grandayum.com/grand-am-ram-air-hood.html" title="Ram-Air Hoods for the Pontiac Grand Am">Ram-Air Hoods</a><br>
<br>

</div><!-- end menu -->
<div id="content">
<h2>Gran Dayum! A Pontiac <span style="font-style: italic;">Grand Am</span> resource site.</h2>
<p>Welcome to Gran Dayum!, a resource site for those who drive one of Pontiac's best-selling car: the Grand Am.</p>
<p>Gran Dayum! is a Pontiac Grand Am owners resource site offering
performance and appearance modifications advice for optimizing the
Pontiac Grand Am.</p>
<div id="imgbox">
<a href="http://www.grandayum.com/grand-am-pictures/metallicred.jpg" rel="external"><img src="Pontiac%20Grand%20Am%20Owners%20Resource_file s/metallicred_thumb.gif" alt="Pontiac Grand Am GT"></a>
<a href="http://www.grandayum.com/grand-am-pictures/whitegt.jpg" rel="external"><img src="Pontiac%20Grand%20Am%20Owners%20Resource_file s/whitegt_thumb.gif" alt="Pontiac Grand Am GT"></a>
<a href="http://www.grandayum.com/grand-am-pictures/red.jpg" rel="external"><img src="Pontiac%20Grand%20Am%20Owners%20Resource_file s/red_thumb.gif" alt="Pontiac Grand Am SE"></a>
</div><!-- end imgbox -->


</div> <!-- end Content -->
<br class="brclear" />

<div id="footing">
<a href="http://www.copyscape.com/" rel="external" title="Content copyright protected by Copyscape"><img src="Pontiac%20Grand%20Am%20Owners%20Resource_file s/cs-wh-234x16.gif" alt="Content copyright protected by Copyscape"></a><br>
© 2007 Grandayum!, a <a href="http://www.grandayum.com/" title="Pontiac Grand Am Resource">Pontiac Grand Am resource</a> site. All content is copyright. All images are copyright to their respective owners.
</div><!--end footing -->
</div> <!--end wrapper -->

And the CSS :

body {
background-color: #333;
font-size: 14px;
width: 95%;
margin: 0;
padding: 0;

}

body, h1, h2, h3, h4, div, p, ul, li, input {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper{
position: relative;
margin: 0;
padding: 0;
width: 95%;


}

h1 {
font-size: 24px;
text-align: left;
margin-left: 20px;
}

h2 {
font-size: 18px;
}

h3 {
font-size: 16px;
}

h4 {
font-size: 14px;
}


hr {
color: #fe0000;
height: 2px;
width: 100%;
}

p {
color: #fff;
font-size: 14px;
}

ul {
color: #fff;
list-style-type: disc;
margin-left: 15px;
padding-left: 10px;
}

ul, li{
padding-left: 5px;
margin-left: 30px;
}

blockquote {
width: 50%;
margin: 0 0 0 10px;
padding: 5px;
border-left: 1px solid #666
}

strong {
font-size: 14px;
}

img {
border: 1px solid #dcdcdc;
margin: 10px 10px 10px 10px;
}

#menu {
background-color: #666;
border: 1px solid #dcdcdc;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
height: 100%;
/*margin-right: 50px;*/
padding: 10px;
width: 125px;

}

#menu a:link, #menu a:active, #menu a:hover, #menu a:visited {
color: #000;
font-weight: normal;
text-decoration: underline;

}



#content {
float: left;
width: 80%;
margin-left: 20px;

}

#content a:link, #content a:active, #content a:hover, #content a:visited {
background-color: #666;
color: #000;
text-decoration: underline;
}

#imgbox {
float: left;
text-align: center;
width: 75%;
}

#imgbox a:link, #imgbox a:active, #imgbox a:hover, #imgbox a:visited {
background-color: #333;
text-decoration: none;
}

#footing {
background-color: #666;
border: 1px solid #dcdcdc;
/*clear: both;*/
font-size: 12px;
margin: 0 0 5px 165px;
/*margin-left: auto;
margin-right: auto;
margin-bottom: 5px;*/
/*margin-top: 100px;*/
padding: 10px;
text-align: center;
width: 80%;

}

#footing a:link, #footing a:active, #footing a:hover, #footing a:visited {
color: #000000;
font-weight: bold;
text-decoration: underline;
}

.videos {
background-color: #000;
border: 1px solid #dcdcdc;
color: #fff;
text-align: center;
width: 200px;
}

.search {
background-color: #000;
border: 1px solid #dcdcdc;
color: #fff;
text-align: center;
width: auto;
}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

That last is to properly clear the floated #menu and #content.

I did what you suggested. My layout is really messed up now!