PDA

View Full Version : IE messing with my div tags

IE messing with my div tags

ResonantEvil
08-17-2004, 05:50 PM
Here's my site: www.humbleabode-victoria.com

Here's my problem: If you're using IE, then you should be able to see the problem immediately. If you're like me and have seen light and switched to Mozilla/Firefox then it should look ok. In IE the menu sits on top of the content window, and the tops of the windows are not aligned. Is there a way to correct this so that the windows appear as they should in both IE and Mozilla?

By the way, the CSS is located in the file www.humbleabode-victoria.com/CSS/content.css

Ok so I solved the problem of the menu sitting on top of the content. I guess I need 2 CSS stylesheets, one for Netscape browsers, and one for IE. Now, I need to line up the tops of all the windows. Anyone know what I have to do?
ResonantEvil
08-19-2004, 12:09 AM
Ok, I need to be able to check what browser the user is using, and then use a tailored CSS file for it. Anyone know a good php script to stick the browser name in a variable, and check it against a list?
Chris
08-19-2004, 12:51 AM
Browser sniffers aren't always reliable, but there is a good one on developer.apple.com, I just can't find it.

You're using a simple 3 column layout though, there should be no need for multiple stylesheets. Instead of using absolute positioning, try using floats. Here, look at this simple 3 col design as an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css" media="all">
#header {
background-color: #6600FF;
font: bold 16pt Arial, Verdana, sans-serif;
color: #FFF;
padding: 8px;
margin-bottom: 10px; /* leaves 10px space below */
}

#col_left {
float: left;
width: 180px;
background-color: #CCFFFF;
font: 9pt Verdana, Arial, sans-serif;
padding: 8px;
}

#col_middle {
margin-left: 200px; /* leaves 20px of space between this and the left column */
margin-right: 200px; /* leaves 20px of space between this and the right column */
background-color: #EAEAEA;
font: 9pt Verdana, Arial, sans-serif;
padding: 8px;
}

#col_right {
float: right;
width: 180px;
background-color: #CCFFFF;
font: 9pt Verdana, Arial, sans-serif;
padding: 8px;
}

#footer {
background-color: #330099;
font: bold 10pt Arial, Verdana, sans-serif;
color: #FFF;
padding: 8px;
margin-top: 10px; /* leaves 10px space above */
text-align: right;
clear: both; /* this makes it clear both of the floats above so it appears below them instead of them overlapping /*
}
</style>
</head>
<body>

<div id="header">MySite.com</div>

<div id="col_left">Some stuff to stick in the left column</div>
<div id="col_right">Some stuff to stick in the right column</div>
<div id="col_middle">
Some stuff to stick in the middle column<br />

<h1>Blah blah blah blah</h1>
blah blah blah
<ul>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
blah blah blah
</div>

<div id="footer">Copyright (c) 2004 by MySite.com</div>

</body>
</html>
ResonantEvil
08-19-2004, 11:45 AM
Thanks Chris, it works like a dream. Here's a question.... what's the difference between using : #header, then <div id="header"> as opposed to .header, then <div class="header">. It seems that IE and Netscape treat them the same, but is that all?
substrukt
08-19-2004, 11:59 AM
its the same in terms of stylesheets, but id is trated the same as name in some browsers.
ResonantEvil
08-19-2004, 12:43 PM
Ok so if a someone is using one of these browsers, will my styles still work using the id attribute?
Chris
08-19-2004, 12:51 PM
id is used for tags that will only be used once. You can never use id="name" more then once (well you can, but it won't validate). It just adds another bit of finess to it. You can change the #'s back to .'s if you want and just use class="name" if you want.
ResonantEvil
08-19-2004, 03:20 PM
Actually I had some probs in IE using class="name", it works better with id="name"
Chris
08-19-2004, 03:36 PM
Shouldn't make a difference if you change the #'s to .'s. (ie. #header to .header).
substrukt
08-20-2004, 08:25 AM
id= and name= are the same thing in some older (ns4 and the like..) browsers. for forms and stuff... only client side though.


Affiliates:
Find jobs|Kamala Harris|WoW Gold|Free Proxy Server|Secure web hosting