...

View Full Version : Divs displaying weirdly in IE.



offfset
01-02-2008, 03:30 PM
Grrr, I really hate IE.

This all seems to work OK on every browser except IE 6 and 7.

http://www.offsetfestival.co.uk/offset/

Any ideas why it's not working or how to make it work?!

jcdevelopment
01-02-2008, 03:37 PM
place this in the css




* {
margin:0px;
padding:0px;
}


see how that looks in IE, it shouldnt affect anything in FF, good luck!

ahallicks
01-02-2008, 04:11 PM
Not quite true Frank. Suppose they rely on a list that uses the generic padding and margins associated with the list tags. If you zero out all margins and padding these lists will look wrong, or not as they did before in all browsers. Same with other things such as paragraphs. You should always remember to reset the default margin and padding on tags such as these that rely on them for a decent looking layout.

You need to do something with that background because at the moment it is not repeating very nicely. As for the problems you are encountering, the first thing you need to do is add a valid doctype to your pages because at the moment IE is rendering in quirksmode and causing all kinds of issues. Look at the thread at the top of this forum for more information.

Also you use 'top' in your styles without any reference to absolute or relative positioning. As far as I can tell you are using the generic static positioning as you haven't set any others. Change it to 'margin-top' and that should work nicely

offfset
01-02-2008, 04:51 PM
Wow, thanks for the quick reply jc.

I've just added that and it didn't appear to make a difference on IE. I tried it exactly as your typed and in .body...

jcdevelopment
01-02-2008, 05:36 PM
ok, i know i have run into this problem before, and i know that it has to do with the relative positioning and negative margins, i dont know if you have tried playing with those options at all, i dont have cssvista on this computer but as soon as i get back to work i will look at it, otherwise just play with those options and see what happens, also validate you document and see what it comes up with.

effpeetee
01-02-2008, 05:55 PM
You do have a number of markup errors according to W3 Validator.

Frank

offfset
01-08-2008, 08:54 PM
Thanks everybody for your help so far.

I've made some tweeks and it's now XHTML valid by W3 standards, yet the problem is still happening. Here's a screengrab in case anyone doesn't have IE.

http://www.offsetfestival.co.uk/offset/offset.png

effpeetee
01-08-2008, 09:21 PM
ok, i know i have run into this problem before, and i know that it has to do with the relative positioning and negative margins, i dont know if you have tried playing with those options at all, i dont have cssvista on this computer but as soon as i get back to work i will look at it, otherwise just play with those options and see what happens, also validate you document and see what it comes up with.
CSSVista is always available in my Sources Program.

http://exitfegs.co.uk/Sources.html


Frank

offfset
01-09-2008, 05:08 PM
I'm looking into the issue and have found this mention on a blog:

http://www.oreillynet.com/pub/a/javascript/synd/2002/11/15/css_pitfalls.html

"Incorrect inheritance of position: relative

Bug: Elements inside a relatively positioned element can incorrectly inherit their position value and their left or right properties (though not their top or bottom properties) from their parent."

Maybe this is what's causing the problem? My divs are positioned using relative positioning...is there any way for me to pull off that sort of design without my divs being relatively positioned?

Excavator
01-09-2008, 05:47 PM
Maybe this is what's causing the problem? My divs are positioned using relative positioning...is there any way for me to pull off that sort of design without my divs being relatively positioned?


Try using floats and margins instead of positioning. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>// offset festival 2008</title>
<style type="text/css">
html, body {
background: #d5d6d7 url(http://www.offsetfestival.co.uk/offset/images/background1.jpg);
color: #333;
text-align: center;
font: 62.5&#37; Georgia, "Times New Roman", Times, serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#maincontent {
width: 783px;
margin: 0 auto;
overflow: auto;
background: #FFFFFF;
}
#logo {
height: 160px;
width: 278px;
float: left;
margin: 116px 0 0 80px;
}
#line {
height: 234px;
width: 1px;
float: left;
margin: 100px 6px;
}
#introtext {
height: 121px;
width: 345px;
float: left;
font-size: 14px;
margin: 116px 0 0 0;
}
#navbottom {
height: 27px;
width: 284px;
clear: both;
text-align: center;
margin: 50px auto 0 auto;
}
.maintext2 {
font-size: 14px;
color: #333333;
}
</style>
</head>
<body>
<div id="maincontent">
<div id="logo"><img src="2008_files/offsetlogo.gif" alt="Offset Festival" height="160" width="278" /></div>
<div id="line"><img src="2008_files/indexline.gif" alt="Offset Festival" height="234" width="1" /></div>
<div id="introtext">
<p class="maintext">
<a class="blue" href="#pictures">&nbsp;Offset&nbsp;</a>
is a brand new festival from the team that brought you the TMF Rock
Festival. Launching in 2008, the festival will take place in a
beautiful forest location just 30 minutes from London. Join the
<a class="blue" href="#mailinglist">&nbsp;mailing list&nbsp;</a>
now for full information.
</p>
</div>
<div id="navbottom">
<p class="maintext2"><a class="blue" href="#pictures">&nbsp;Pictures&nbsp;</a> | <a class="blue" href="#mailinglist">&nbsp;Mailing List&nbsp;</a> | <a class="blue" href="#contactus">&nbsp;Contact Us&nbsp;</a></p>
</div>
<!--end maincontent--></div>
</body>
</html>

The validator still finds a few things wrong with that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum