Explorer trashes my site!!!

[danthemanjones]

I have a site http://www.rexburginternet.com

In firefox 3 everything looks o.k but in explorer, especially older versions there is a big white space under the picture of the earth and on other spots.

It bugs me so much but I am NOT a web designer so I have no idea what is wrong. It took me forever to put the site together and it sucks that in one browser it looks o.k and in another is looks like crap.

Any ideas why it does this?

Thanks

 

[randyhenson]

You have more than one big white space, One under your sign up & more info buttton, One under the other more info button, and One under the "Home Delivery..." read more button. They are harder to see but they are there.

Your css is the problem, #toplcpad and #toprcpad. If you took out the css it would probably fix it

 

[danthemanjones]

Your right...

Your right about the white spaces everywhere.

I think your are also right about the issue being with the CSS. I tried taking it out but the site just looks even worse.

I have been working on a new website that looks 100% different and figure I might as well get to work and get that one up instead.

I wish explorer and firefox both read the code the same.

thanks!

 

[netzilla]

Dan - We all feel your pain. Typically what works in IE dont work in Firefox or vice versa. I typically keep both browsers open and test frequently while I am designing a website especially when using css. Hopefully one day all browsers will become compliant standard.

 

[danthemanjones]

Web developer toolbar--

Thanks for your help and replies.

I am a complete novice at web design but I am doing my best and learning as I go.

You ALL probably know about the tool called "web development toolbar" that works in firefox and explorer. I can make changes to the CSS or HTML or pretty much anything and see the results instantly using it. It is turning into a lifesaver.

I wish Dreamweaver could show you the realtime results from minor code changes. At least I found the toolbar tool yesterday to help out.

The site still looks pretty bad but this tool has helped me narrow down the problem.

 

[netzilla]

Yes I have the web development tool myself. It has some nice features. Hang in there you will get it.

 

[bluearrow]

Even in Firefox it shows little bit of white space, isn't it ?

 

[danthemanjones]

Even in Firefox-

Yes, even in firefox it shows a little.

SO very frustrating. I played around a bit with the "web development toolbar" and got it looking a bit better but not much. I did not save the changes on the real site.

Maybe I can figure it out over the next few days.

 

[fak3r]

Can you post the css file? I might be able to help you with the white spaces.

 

[danthemanjones]

Here is my CSS

Here is the CSS- (or you can see the file on my site @

http://www.rexburginternet.com/test.css

I am not convinced it is a CSS problem but then again I know NOTHING about CSS and very little about html. I can post ANY file on my site you want if you are willing to help out. I will even post all the files in a .zip on rapidshare if you want....Whatever..

Thanks so much for all the help so far-

@charset "UTF-8";
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
margin: 0px;
padding: 0px;
background-image: url(images/topbg.gif);
background-repeat: no-repeat;
background-position: center top;
}
#sky {
background-image: url(images/bg22.gif);
background-repeat: no-repeat;
background-position: right top;
}
#toplcpad {
padding-top: 20px;
padding-right: 2px;
padding-bottom: 10px;
padding-left: 2px;
}

#toprcpad {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-bottom: 3.6em;
}

#midcpad {
padding-top: 4em;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-right: 2.5em;
}
#blueline {
border-left-width: 2px;
border-left-style: solid;
border-left-color: #214e86;
}

#htlcol {
padding: 4px;
margin-bottom: .5em;
}

#tbns img {
margin-right: 2px;
margin-left: 2px;
}

#htrcol {
padding: 4px;
margin-bottom: .5em;
border: 0px dotted #FF0000;
}

#htrcol ul{margin:0; padding:0; list-style:none; line-height:20px}
#htrcol li{background:url(images/z1.gif) center left no-repeat; margin:0px; padding-left:19px; background-position:0 3px }
#htrcol li a{
color:#6E6E6E;
font-weight:bold;
text-decoration:none;
font-size: 10px;
}
#htrcol li a:hover{text-decoration:underline}
#readmore {
margin-top: 1em;
margin-bottom: 1em;
}

img {
border: 0px;
}

.bg2{ background:url(images/1_bg.gif)}
.bg3{
background:url(images/1_bg1.gif) no-repeat top left;
height:200px;
margin-left: 1.5em;
}
.bg4{
background:url(images/1_bg2.gif) no-repeat bottom left;
height: 14px;
margin-left: 1.5em;
}
#content {
width:100%;
text-align:left;
background-color: #07264d;
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-bottom: 1em;
}

#contentinner {
margin-top: 4em;
color: #FFFFFF;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 8px;
}

#footertop {
background-color: #07264d;
height: 15px;
}

#footerbtm {
background-color: #214e86;
height: 50px;
width: 800px;
}

#footerbtml {
background-image: url(images/z.gif);
background-repeat: no-repeat;
background-position: left top;
height: 17px;
margin-left: 1em;
}

#footerbtmr {
float: right;
margin-right: 4em;
}

 

[fatratstew]

Best thing to do is make little changes and check both browsers every time. Eventually you will find a middle ground where it works in both.

 

[thenext88]

Put this in your CSS file:

img.nospace {white-space:nowrap}

And then in your HTML... <img class="nospace" src=... />
Use this for all images, and you shouldn't get any unwanted white spaces.

Also I tend to avoid using the body tag in CSS... if you want universal CSS use:

* {...}

I remember white spaces being one of my biggest problems when it came to FF vs IE... but the nowrap CSS solved it completely for me.

 

[Rudy]

I'm surprised no one has mentioned yet validating your CSS & HTML. Having valid code is good for SEO and a lot of times it fixes problems that I have. Use this to validate your html: http://validator.w3.org/

w3 also has a CSS validator somewhere that is also good.

 

[danthemanjones]

Thanks yet again---

I tried the validator and it gave me a few things to work on with my html. It claimed my CSS was perfect though.

I will try the img.nospace {white-space:nowrap} later on today and see what happens.

Thanks.. I am learning so much from you.

 

[randyhenson]

I don't think your css is coded wrong, it's just the css padding throwing off your columns. There is basicly three columns in the upper part of your site. The sizes and padding is different on each column. The padding in the middle column is causing the big white space under the picture of the earth and so on...