CSS Woes

[thewzard]

Hey guys,

I've been working on my company's website for a few weeks now and I'm having some last minute troubles. I say last minute because once I fix these problems I can publish the site.

I'm relatively new to web design but I have gone through some training DVDs about Dreamweaver essentials so I'm not completely lost but troubleshooting is almost impossible. Any help would be greatly appreciated.

The first problem I'm running into is with my CSS layout. In Dreamweaver and Firefox my website displays as it should but in IE the two last characters of text inside one of my divs are also displaying in it's immediate outer div. Its rather strange because the last two characters and only the very last two characters appear inside the div (where it should be) and outside of the div.

Here are some screenshots:
http://i111.photobucket.com/albums/n121/thewzard/img01.jpg
http://i111.photobucket.com/albums/n121/thewzard/img02.jpg

I don't understand why this is happening and I've played with a lot of different settings and nothing. However if I float the bottom right div to the left and reduce it's width the problem goes away. Yes this fixes my problem per se but I have that nasty gap on the right hand side of the outer div if I leave it like this.

Ex:
http://i111.photobucket.com/albums/n121/thewzard/img03.jpg

The second problem that I'm having is that ever since I added an onClick open browser window behavior I get the yellow information bar that pops up in IE (see above screenshot). Man I'm really starting to hate designing for IE =/. Is there any way to have javascript on your page without getting that information bar every time someone visits your page?

Any help is greatly appreciated.

 

[thewzard]

Update

Upon further inspection it seems to be a padding/margin/width issue. For some strange reason Internet Explorer and Firefox don't agree upon the behavior of padding. You would think that something so simple would not create such a problem.

I've tried adjusting this thing for two days and its almost like I'm going in circles. If I fix it in one browser I end up messing it up in the other. There has to be a simpler way to do this or else creating a website would take ages. Maybe I should just create a table and go that route instead of trying to keep it in divs.

 

[zkiller]

it's kind of hard trying to diagnose your problem without seeing the code. IE is the nightmare of most web developers as it's standards compliance isn't all that great.

 

[thewzard]

Possible solution

Well someone recommended that I design for Firefox and then create a separate CSS style sheet for IE. He said I could google to find instructions.

 

[zkiller]

that would work.

 

[thewzard]

Bah

I hate web design =/

So I read this article and I try to do as it says but now in IE7 I break my design when fixing it in IE 6.

http://www.thesitewizard.com/css/excludecss.shtml

This is the code I have
----------------- Begin Code ---------------------
<link href="../styles/style.css" rel="stylesheet" type="text/css" />
<link href="../styles/print-2col.css" rel="stylesheet" type="text/css" media="print" />


<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie6style.css" />
<! [endif] -->

<link href="../styles/iestyle.css" rel="stylesheet" type="text/css" />

</head>
----------------- End Code -----------------------

I'm confused and to be honest I'm about to give up =/