If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Firefox & Safari Great, IE pushes div and creates random line

I have 2 issues that I have been bumping up against, and have spent hours making small CSS changes, FTPing the file and hitting refresh in hopes that it will fix the error in IE. So now I need to ask for expert help because I can't figure this out (I always get awesome help here, but I wanted to put in a good effort first!)

The H1 Class "title" and Div ID "logo" are both pushed to the left in IE6 and oddly, IE8 running in compatibility mode. This happened at the same time as I put a custom twitter update box in the upper right of the page. Both firefox and safari allowed this box to be there without damaging the main title and logo. IE apparently just pushes both to the left.

And then lastly, the twitter update box has an odd dotted "border-bottom." This only shows up in IE. I found the CSS in the following lines of code:

Your h1, #logo (which should really be an h2 instead of a div) and twitter all need widths.

Great advice. Assigning a width to just the header class already fixed my alignment issue in IE. I will continue to test adding widths to other elements, but I am very happy with this solution so far.

I looked at the CSS suggestion and it appears you left the twitter box CSS unchanged, do you have any suggestion as to why that gray dotted border appears in Internet Explorer but not the other browsers?

I looked at the CSS suggestion and it appears you left the twitter box CSS unchanged, do you have any suggestion as to why that gray dotted border appears in Internet Explorer but not the other browsers?

Oops, sorry about that. I must have gotten distracted.
I see you've solved it though so good on you!