...

View Full Version : Div layout different in IE7 than Firefox



zactownsend
02-21-2009, 09:09 PM
My page was designed with Firefox in mind, and looks just as I want in FF. But in IE7 the div placement is off. There should be an easy way to fix this but I'm not sure what that would be.

Here is a link to my page:

http://zactownsend.oxyhost.com

As you can see, if you have IE installed, it looks a bit off. Any help would be appreciated. Thanks.

drhowarddrfine
02-21-2009, 09:25 PM
You will never get IE to attempt to perform like other more modern browsers without a proper doctype. Put this on your first line and see where we stand:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

It's not at all unusual for any version of IE to screw up properly written markup however.

zactownsend
02-21-2009, 10:11 PM
Should I replace the current doctype info or put that before it?

Rowsdower!
02-21-2009, 10:50 PM
Hmmm. I'm not seeing a doctype in your current page at all. In any case, you'll want to place your doctype ABOVE the <html> tag and there should only ever be ONE doctype within a single document.

Excavator
02-21-2009, 10:55 PM
Should I replace the current doctype info or put that before it?

The online version has no DocType declaration. That and the character encoding should go at the top, like this
<!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>
</head>
<body>
website here
</body>
</html>See the link in my sig about DocTypes. I'm pretty sure there is also a sticky at the top of this forum on DocTypes.

Once you get your DocType added, goto the validator and see if there are any errors in your code.

Stuff like this should be fixed
body {
background-color: #474728;
font-family: sans; /*sans is not a font*/
}


div.top {
background-color: #474728;
position: fixed;
top: 0; left: 0;
width: 100%; height: 160px;
z-index: 200;
}

div.left {
background-color: #474728;
background-image: url("left_2.png");
background-repeat: no-repeat;
background-position: 5px 0px;
position: fixed;
top: 27%; left:0;
width: 250; /*250 what?*/
height: 65%;
z-index: 5;
padding-top: 50px;
padding-left: 10px;
}

div.main {
background-color: #474728;
position: absolute;
top: 150; /*150 what? Your header is 160px...*/
left: 275; /*275 what?*/
width: 700px; height: 100%;
z-index: 0;
}

h1 {
font-family: "sans";
font-weight: normal;
}

li.navigation {
list-style-type: none;
padding-bottom: 45px;
font-family: "sans";
font-size: 30px;
text-align: center;
}



<li> tags are part of an unordered list (or an ordered list) and have to be enclosed with ul tags. This might work better like this:
<ul class="left">
<li class="navigation"><a class="left" href="index.html">Home</a></li>

<li class="navigation"><a class="left" href="portfolio.html">Portfolio</a></li>
<li class="navigation"><a class="left" href="pricing.html">Pricing</a></li>
<li class="navigation"><a class="left" href="contact.html">Contact</a></li>
</ul>


The validator may find other errors too.

Apostropartheid
02-21-2009, 11:05 PM
I believe Sans is listed as a typeface on certain Linux systems, but my gratis typography is hazy at best. I think this is mapped to DejaVu Sans on Ubuntu. The typography throughout the site seems to be based on this typeface, but the author seems not to be one for cross-platforming.

Excavator
02-21-2009, 11:12 PM
I believe Sans is listed as a typeface on certain Linux systems, but my gratis typography is hazy at best. I think this is mapped to BitStream Vera Sans on Ubuntu. The typography throughout the site seems to be based on this typeface, but the author seems not to be one for cross-platforming.

It could very well be a font, just because I've never heard of it doesn't make it not and I should have worded that differently.
I looked at the Font Store and found this -
There are 13710 downloads in the Sans category. Click any sample to view font details and purchase options. But not one of those was named only Sans.
It doesn't look like a lot of people are going to have this one pre-installed on there machine.

Apostropartheid
02-21-2009, 11:28 PM
Unless you're in Ubuntu and related flavours, no. Severe need of font stacks here.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum