PDA

View Full Version : IE7 is ignoring some padding!



greens85
Apr 15th, 2010, 01:23 PM
Hi,

In Firefox my navigation appears like this (Firefox.gif)

In IE7 is displays like this (IE7.gif)

As you will be able to see from the images, while IE7 acknowledges the padding left, right and bottom it chooses to ignore the padding at the top!

My HTML is:


<a href="about.php" class="submenu-a">About Education World Ltd</a> <a href="meet-the-team.php" class="submenu-na">Meet The Education World Team</a>

and the relevant CSS is:


.submenu-a {
background-color:#004363;
color:#FFFFFF;
padding:0.8%;
margin-right:0.5%;
}

.submenu-na {
background-color:#339ACC;
color:#FFFFFF;
padding:0.8%;
margin-right:0.5%;
}

.submenu-na:hover {
background-color:#004363;
color:#FFFFFF;
padding:0.8%;
margin-right:0.5%;
}

Is anyone able to advise on this issue?

many thanks,

Greens85

Excavator
Apr 15th, 2010, 05:44 PM
Hello greens85,
IE7 appears to display inline anchor differently. Adding display:inline-block; should sort it out.
You would get more control over these tabs/anchors if you used an unordered list to build your navigation. See some menu examples here (http://nopeople.com/design/CSS%20tips/index.html).


Some different grouping here -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin: 30px auto;
padding: 0 0 300px;
background: #999;
overflow: auto;
font-size: 1em;
}
.submenu-a,
.submenu-na {
color: #fff;
padding: 0.8%;
display: inline-block;
}
.submenu-a {
margin: 0 0.5% 0 0;
background: #004363;
}
.submenu-na {background:#339ACC;}
.submenu-a:hover,
.submenu-na:hover {color: #f00;}
</style>
</head>
<body>
<div id="container">
<a href="#" class="submenu-a">About Education World Ltd</a>
<a href="#" class="submenu-na">Meet The Education World Team</a>
<!--end container-->
</div>
</body>
</html>

greens85
Apr 16th, 2010, 12:05 PM
Hi Excavator,

I have made the recommended changes, including the grouping


.submenu-a,
.submenu-na {
color:#FFFFFF;
padding:0.8%;
display:inline-block;
}

.submenu-a {
margin: 0 0.5% 0 0;
background:#004363;
}

.submenu-na {
background:#339ACC;
}

.submenu-a:hover,
.submenu-na:hover {
color:#FFFFFF;
}

(presumably the grouping is just to cut the amount of css and thus produce faster loading times?)...

Anyway, it has filled the block element out as I wanted but has now added space between the block and line that the blocks are supposed to sit on (Image attached!)..

Any ideas whats happened or what I have done wrong?

Many thanks,

Greens85

Excavator
Apr 16th, 2010, 05:20 PM
Can we have a look at your code? What little you've shown has no line in it.

greens85
Apr 16th, 2010, 05:29 PM
Of course...

This is the HTML for the content of the page:



<div id="maincontent">
<div id="text">
<a href="about.php" class="submenu-a">About Education World Ltd</a> <a href="candidate-recommendations.php" class="submenu-na">Candidate Recommendations</a> <a href="client-recommendations.php" class="submenu-na">Client Recommendations</a>
<div id="blueline"></div>
<br/>
<img src="images/image.jpg" width="283" height="424" border="0" align="right" />
<p>Content</p>
<br/>
<p>Content</p>
<br/>
<p>Content</p>
<br/>
</div>
</div>

The line i'm referring to is
<div id="blueline"></div>

and the CSS for this:


#maincontent {
margin-top:2%;
margin-left:2%;
margin-right:2%;
margin-bottom:2%;
padding:1%;
height:500px;
font-size:14px;
text-align:left;
}

#text {
float:left;
width:100%;
text-align:justify;
}

#blueline {
background:#004363;
height:2px;
margin-top:0.8%;
}

I originally thought it was the margin-top that was causing the error, but I have tried removing it and it still persists... the site displays fine in firefox and doesnt add any space between the 'blocks' and the 'line'...

thanks for your help!

Excavator
Apr 16th, 2010, 05:48 PM
You are moving #blueline down with margin you've set in the CSS.
See highlighted in red -
#blueline {
background:#004363;
height:2px;
margin-top:0.8%;
}

Excavator
Apr 16th, 2010, 05:51 PM
FF3.6, IE8 and IE7 all respond to removing that top margin. What browser are you see this gap in?

greens85
Apr 16th, 2010, 05:59 PM
FF3.6, IE8 and IE7 all respond to removing that top margin. What browser are you see this gap in?

Really?

I tried removing that line from the CSS altogether and it made no difference what so ever!

I'm developing in firefox 3.5.9 and testing in IE7...

Displays fine in firefox and shows the gap in IE7!

greens85
Apr 16th, 2010, 06:04 PM
I realise why now...

I have a stylesheet for both firefox and IE (for IE hacks etc.)

If I remove the padding from the firefox stylesheet it displays fine in IE but then the line goes behind the blocks in firefox... If I leave the padding in the firefox stylesheet but change it in the IE stylesheet it has no impact, and thus looks correct in firefox but not IE!

I thought I'd be able to have it set like this:

IE Stylesheet:


#blueline {
background:#004363;
height:2px;
}

Firefox Stylehseet:


#blueline {
background:#004363;
height:2px;
margin-top:0.8%;
}

thus having it display correctly in both but when I do this, IE seems to look at the firefox stylesheet and use the margin-top!

Excavator
Apr 16th, 2010, 06:28 PM
Do you have a link to the test site? You have something else going on.

greens85
Apr 16th, 2010, 06:36 PM
Do you have a link to the test site? You have something else going on.

Yeah no problems the test site is located at:

http://www.education-world.co.uk/Education%20World%20Site/index.php

An example of blocks and lines can be found on the about us page:

http://www.education-world.co.uk/Education%20World%20Site/about.php

Thanks

greens85
Apr 16th, 2010, 06:45 PM
I know there are some validation errors (quite a few actually)...

I plan to rectify these but just need to get the majority of the site down for now!

Excavator
Apr 16th, 2010, 07:31 PM
You have #blueline in both stylesheet.css and IE_stylesheet.css.
IE8 and IE7 get 0.8% top margin (what's up with the % anyway?) from stylesheet.css.

Remove that and the gap closes.

What browser are you actually wanting that top margin in? I don't understand why you are leaving it there at all.

I've been on about this before ... Out of all the sites I've built I've never once needed conditional statements to serve different CSS to different browsers. A well thought out, semantic and valid document usually works as intended across all browsers. Once in a while there is the odd IE bug that needs sorted but many times they can be avoided, that's where the well thought out part comes in.

And you're right about the validation errors. Several there that need to be fixed.

greens85
Apr 16th, 2010, 07:41 PM
You have #blueline in both stylesheet.css and IE_stylesheet.css.
IE8 and IE7 get 0.8% top margin (what's up with the % anyway?) from stylesheet.css.

Remove that and the gap closes.

I know that if I remove it the gap closes in IE but then in firefox the line disappears behind the boxes! I can do you a screenshot if needed.

So as far as I can see I can either have it with a gap in IE or behind the boxes in firefox!

Unless of course there is something I have completely missed.

As for percentages I thought that they were used for liquid designs that would adapt to the users monitor???




What browser are you actually wanting that top margin in? I don't understand why you are leaving it there at all.

I've been on about this before ... Out of all the sites I've built I've never once needed conditional statements to serve different CSS to different browsers. A well thought out, semantic and valid document usually works as intended across all browsers. Once in a while there is the odd IE bug that needs sorted but many times they can be avoided, that's where the well thought out part comes in.

And you're right about the validation errors. Several there that need to be fixed.

Excavator
Apr 16th, 2010, 07:56 PM
I'm sorry. I thought we'd already covered display issues.


#blueline {
background:#004363;
height:2px;
/*margin-top:0.8%;*/
}
.submenu-a,
.submenu-na {
color: #FFFFFF;
padding: 0.8%;
margin-right: 0.5%;
display: inline-block;
}
.submenu-a {background: #004363;}
.submenu-na {background: #339ACC;}