CSS problem only in IE

alignment error in IE

[boost]

I'm having a problem with my webpage in Internet Explorer. The page is <snip>. When viewed in Google Chrome or Firefox the page works great. However, in Internet Explorer The content portion of the page appears after the left bar, instead of to the right.

Also, is there a way to set the left bar and content bar to together occupy 100% of the page?

Also, in IE the first of the two sets of links is indented. Is there a solution for this?

Also, my logo has a rectangle around it only in FF and IE (not chrome). Any way to get rid of it? And IE doesn't show the background beneath the logo...?

Sorry I've got so many questions. If you have an answer to only one, it would be greatly appreciated.

[edited by: swa66 at 12:37 pm (utc) on Aug. 26, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[D_Blackwell]

1) Welcome to WebmasterWorld. The link is going to get axed, so I will restrict my comments to the obvious and to the usual suspects so as to minimally contaminate the thread.

2) The content portion of the page does NOT work great in FF. Take the width of viewport down. It's way too wide and this will need work for all browsers IMO; probably a minor fix.

3)

Also, is there a way to set the left bar and content bar to together occupy 100% of the page?

If you are floating the left bar to the left and fixing a percentage width, then just let the content bar slide up and the block will take up the rest of the width of the page. This is one option. You may get other suggestions.

3) The logo is almost certainly linked, and you are viewing the outline created by <a>. Logos are images, and if it didn't start with a border, then it didn't suddenly grow one. It was added in the coding. Class the img and kill the border:

a img.border {
border: none;
}

4) Try to work out the ". . .background beneath the logo. . ." on your own. If it still does not work, post enough test ready code here to replicate the issue, and note what you have tried in order to address the issue.
}

[boost]

Hey, thanks for your help. I don't quite understand how to "let the content bar slide up." This is my first attempt with CSS, I had only done HTML. I started with an open template and made lots of modifications. Here is the CSS code applicable to those two bars:

#vertinav {
background-color:#D7D7D7;
width:182px;
height:100%;
float:left;
}

#vertinav ul {
list-style: none;
display:inline;
}
#vertinav li a{
margin:0 0 0 5px;
color:#666666;
text-decoration:none;
}

#vertinav li a:hover {
color: #00007c;
}
.vertinavheader {
font-size:22px;
color:#000000;
margin-left: 5px;
}

#vertinavcontent {
margin-left:5px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
}

#content {
background-color:#E4E4E4;
float:left;
width:810px;
}

I would like it to take up the whole width, as it seems you are suggesting, but I'm not sure how to have the content bar end up to the right.

Thanks for your help!

[D_Blackwell]

#vertinav specifies width: 182px; and float: left;

#content specifies width: 810px;

That means my viewport must be a minimum of 992px wide or content is going to get pushed down below #vertinav. This monitor is 1600 x 1200, but I also have about a dozen applications open and I am not giving you 992px; of real estate. Your design is broken. The browser is not relevant. One issue is the size of the viewport and your specifications. The 'average user' may be fine. They will be on 1024 x 768 or some such, but you are on the edge there also. For example, I am using a FF extension that runs my tabs vertically and that takes up 50px - 60px, whatever. Broken again. You stated, "The content portion of the page appears after the left bar, instead of to the right." If I widen my screen, to give you your width of 992px; - then #content will pop up into place - to the right of #vertinav.

I would look at declaring some width percentages. This could save a lot of grief. You may get differing opinions and find them preferable. There are options.

A couple of related but different issues really. The code is currently specifying, for practical purposes, a minimum width for the users screen, and that width is pretty high. I would want to be more flexible.

BTW - Do you need display: inline; on <ul>? Just asking.