PDA

View Full Version : Space above DIV inside aother DIV in Internet Explorer



kslallstar
Mar 3rd, 2010, 06:21 PM
I am having a horrible time trying to figure this out.

I have a "sidebar1" div that contains the nav, it is supposed to be aligned to the top right of the "container" div.

There is also a "maincontent" div that holds the content of the page within "container" div.

It looks great in Firefox and Safari but there is a space above the "sidebar1" div when I use IE.

Hopefully this isnt too confusing, here is the website:
www.lozondesigns.com/clients/benson/home.html

Here is the CSS for the container and the sidebar1 and the maincontent:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000;
margin: 0;
padding: 0;
line-height: 125%
}

.twoColFixRt #container {
width: 672px;
margin: 30px auto; /* center the page */
text-align: left;
background-image: url(../images/Body-Bground.jpg);
background-repeat: no-repeat;
background-color: #010430;
border-width: 1px;
border-style : solid ;
border-color : #2cabe2 ;
}


.twoColFixRt #sidebar1 {
float: right;
width: 171px;

}

.twoColFixRt #mainContent {
margin: 150px 0 0 0;
padding: 0 50px;
font-size: 13px;
text-align: left;
line-height: 125%
}

.twoColFixRtHdr #footer {
padding: 0 10px 0 20px;
}

!!!ANY HELP WOULD BE GREATLY APPRECIATED!!!

dudeshouse
Mar 3rd, 2010, 06:34 PM
Firstly, this page has 84 errors on it, so you want to check your validation...

You have 2 divs with identical IDs. This is not good...

On that note, those 2 divs (id="sidebar1") are having a padding-top: 30px apllied to them from somewhere. I can't see where this is coming from using Firebug, but the IE developer's tools show it.

If you remove this, the problem goes away!

Good luck!

Aah, it's in the conditional comment for IE...

kslallstar
Mar 3rd, 2010, 07:14 PM
Thanx a million dudeshouse!!
totally forgot about the condition IE comment!

You said that i have 2 divs with identical IDs???

Also, I hadn't done a validatio check yet, so I did one and it only comes up with 20 errors.
You used Firebug to validate?

skywalker2208
Mar 3rd, 2010, 07:20 PM
Thanx a million dudeshouse!!
totally forgot about the condition IE comment!

You said that i have 2 divs with identical IDs???

Also, I hadn't done a validatio check yet, so I did one and it only comes up with 20 errors.
You used Firebug to validate?

No, he validated the site at w3c. Take a look your site in the validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lozondesigns.com%2Fclients%2Fbenson%2Fhome.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

kslallstar
Mar 3rd, 2010, 07:46 PM
Most of the errors are the same and I dont understand:


Line 106, Column 93: required attribute "alt" not specified

…ges/Nav1.jpg" width="33" height="20" /><a href="home.html" onmouseout="MM_swap…

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

skywalker2208
Mar 3rd, 2010, 11:12 PM
It tells you what you need to do. you need to add the alt tag to your image so it should look like


<img src="boat.gif" alt="Big Boat" />

dudeshouse
Mar 4th, 2010, 10:15 AM
Your site's looking much better in IE now.

How are you getting on with getting the validation up to scratch?

With regards the duplicate IDs - you're only allowed to use an ID name once per page. If you need more than one element to have the same styling, use classes instead.

kslallstar
Mar 5th, 2010, 07:43 PM
Thanx alot guys!
I havent had a chance to getting the validation stuff fixed yet. Just been busy with other projects.
But I dont think it will take me too long to get rid of all the errors.

Quick question, what is the benefit of having 0 errors? As opposed to leaving your site with errors?
I've never done a validation check before.

met
Mar 5th, 2010, 08:14 PM
the benefit of having no errors is that your site conforms to the standards set by the w3c

IMO: it constitutes good webdesign, as well as an understanding of what you are doing. websites that are valid are often more accessible to more users

however there are many very large, very popular sites that do not have valid htm/css ~ either by CMS generated code, using hacks, css3 etc that aren't the "standard" but are whipped together in such a way that you'd never notice in the deliverance of the website.

certainly the cause of the majority of display strangeness and layout bugs are down to invalid css and html.

certainly if a website is well tested and displays fine to 99% of its visitors, then having valid code may not mean much, but its definitely something to consider.

kslallstar
Mar 5th, 2010, 09:32 PM
Thanx met.
I will validate all my pages for sure.

dudeshouse
Mar 6th, 2010, 06:22 PM
Good idea, it's just best practice.

Don't forget to click on the Thank User button if you've found us helpful! Nothing wrong with a bit of shameless self-promotion! =)