PDA

View Full Version : Tabs made in CSS on different positions IE and FF



Monx
Oct 19th, 2008, 09:53 PM
Hi all!
I'm quite new to CSS since a few weeks so I'm still figuring it all out. I'm currently working on a project for school and I'm having some really frustrating problems with the tabs I created in CSS. Take a look at these screenshots:

Result in Internet Explorer (http://img.photobucket.com/albums/v344/Matthys/ff.jpg)
Result in Firefox (http://img.photobucket.com/albums/v344/Matthys/ie.jpg)

You can see a big difference in positioning of the tabs between the two browsers. Also a quick question: why is the <h1> text aligned differently in Firefox?

Here's the HTML code:

<!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" lang="en" xml:lang="en">
<head>
<title>Showcase van Matthijs</title>
<link rel="Stylesheet" type="text/css" href="Home Showcase.css"/>
</head>
<body>
<div class="banner-links">
<ul>
<li><a href="Home Showcase.html">Home</a></li>
<li><a href="Over mij.html">Over Mij</a></li>
<li><a href="Showcase.html">Showcase</a></li>
<li><a href="Links.html">Links</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
<div class="tekstvak">
<h1>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</h1>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>

<div class="footer">
Copyright
</div>
</body>
</html>


And here's the CSS code:

@charset "utf-8";
/* CSS Document */

body {
background-image:url(file:///C|/Users/Molhoek/School/Internet%20Standaarden/Home%20background%20copy.jpg);
margin-left: 25%;
margin-right: 25%;
}

.banner-links{
background-image:url(../../Pictures/Photoshop/vloeiende%20lijnen%20copy.jpg);
padding: 5px;
width: 40em;
height: 5em;
border: 1px solid black;
}

ul{
font: 13px 'Lucida Grande', Arial, sans-serif;
list-style-type: none;
margin: 5em 0em 0em -2.4em;
}

ul li{
display: inline;
}

ul li a{
text-decoration: none;
padding: .3em 3em;
color: white;
background-color: black;
}

ul li a:hover{
color: black;
background-color: white;
}

.tekstvak{
border: 1px solid black;
background-color: #6c716b;
padding: 5px;
width: 40em;
height: 36em;
}

.footer{
border: 1px solid black;
background-image:url(../../Pictures/Photoshop/vloeiende%20lijnen%20copy.jpg);
padding: 5px;
width: 40em;
height: 1em;
}

I want the result to be the same in IE as in FF. Why isn't this the case and can anybody help me fix it? I've been trying myself, but I can't seem to get it done. Thanks in advance!

gnomeontherun
Oct 19th, 2008, 11:14 PM
Since this is homework, I will give you a little direction. Your tabs are based on calculations by the browsers, which unfortunately are not exactly the same in FF and IE.

http://www.pat-burt.com/troubleshooting/css-elements-different-sizes-in-ie-and-firefox/

Monx
Oct 21st, 2008, 01:55 PM
Thanks for the reply!

Different calculations? That's really annoying! I've checked out the link you gave me and tried the tips given in the article, but I still can't get the tabs to look the same in the 2 browsers.

If anyone else has something to add it would be greatly appreciated!

abduraooft
Oct 21st, 2008, 02:18 PM
Hi Monx,

Don't apply width/margins directly to the html/body elements.

You'd need to wrap your presentation elements by a wrapper div, and then apply the margins and width to. So that, no need to apply margins and widths to its child elements. Say

#wrap{
width:40em;
margin:0 auto;
}

<div id="wrap">
<!-- all other elements here......-->
</div>

Now add
*{margin:0;padding:0} in to your CSS to reset all browser specific defaults.

PS: please use
][/COLOR] tags to wrap your codes while posting here.

PPS: Welcome to CF.

Samhain13
Oct 21st, 2008, 02:18 PM
Homework? Hehe.

Here's a hint though. Remember that different browsers have different default values for margins and paddings. So, start off by setting the margins and paddings of your block-level elements to 0px, then adjust them as necessary.

Here's another hint. UL's are block-level elements that contain block-level elements.

:)