/    Sign up×
Community /Pin to ProfileBookmark

Noob needs help

Copy linkTweet thisAlerts:
Jul 12.2007

Hi

Just put my first layout together using xhtml and css layout.
All seems to work well on mac browsers and on Firefox windows.
But the layout breaks on IE 6 for windows ( not tested it on IE7 windows)

Can anyone see anything obviously wrong in the CSS code.
[URL=”http://www.pointsize.co.uk/cowgate”]http://www.pointsize.co.uk/cowgate[/URL]

Any pointers would be gratefully accepted

J

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJul 12.2007 — Put this into your code:
<i>
</i>* {margin: 0; padding: 0;}

It will void out all the weird padding that IE likes to put in. You may have to add some spacing styles, since this does void the defaults, if you were relying upon any of those.

KDLA
Copy linkTweet thisAlerts:
@johnshawauthorJul 12.2007 — Put this into your code:
<i>
</i>* {margin: 0; padding: 0;}

It will void out all the weird padding that IE likes to put in. You may have to add some spacing styles, since this does void the defaults, if you were relying upon any of those.

KDLA[/QUOTE]


Hi KDLA

Thanks for your response - have tried this already - no with no success

J
Copy linkTweet thisAlerts:
@LeeUJul 12.2007 — For the record, it looks the same in IE7 as it does in FF, except there is no padding at the top. The white border is at the top of the screen.
Copy linkTweet thisAlerts:
@johnshawauthorJul 12.2007 — For the record, it looks the same in IE7 as it does in FF, except there is no padding at the top. The white border is at the top of the screen.[/QUOTE]


Thanks Lee - so it just seems to be broken in IE 6

J
Copy linkTweet thisAlerts:
@macthewebJul 12.2007 — I'm not at work so don't have access to a Windows computer right now. Looking at your code and what little description you've given - layout breaks is not very specific- I'm guessing that you have found a nest of IE 6 float bugs.http://positioniseverything.net/explorer.html

Your particular design with a fixed height would lend itself well to using absolutely positioned divs instead of floats. Another general trick for dealing with floats it to keep them confined within horizontal wrappers:
<i>
</i>&lt;div id="header"&gt;
&lt;div id="headerleft"&gt;&lt;/div&gt;
&lt;div id="headerright"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="nav"&gt;
&lt;div id="navigationleft"&gt;&lt;/div&gt;
&lt;div id="navigationright"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="main"&gt;
&lt;div id="leftcolumn"&gt;&lt;/div&gt;
&lt;div id="rightcolumn"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;&lt;/div&gt;
etc.
<i>
</i>#header {clear: both; height: 1%;}
#nav {clear: both; height: 1%;}
#main {clear: both; height: 1%;}
#footer {clear: both; height: 1%;}

The clearing confines each stack to it's own row. This way you will know quickly which div is buggy. The height: 1%; is the "Holly Hack" and helps with at least two IE float bugs that may be giving you problems. It insures that your design "hasLayout" http://www.satzansatz.de/cssd/onhavinglayout.html

The Holly Hack needs to be applied to the containing element, that's why I always add the extra wrapper to each horizontal layer.

If you really want to be clean about it you would use a conditional statement to only feed the hack to IE 6 and lower:
<i>
</i> 1. &lt;!--[if lte IE 6]&gt;
2. &lt;style&gt;
3. #header, #nav, #main { height: 1%; }
4. &lt;/style&gt;
5. &lt;![endif]--&gt;


Or with absolutely positioned elements:
<i>
</i>#header {
position: relative;
height: 123px;
}
#headerleft {
position: absolute:
left: 0;
top: 0;
background-color:#CCCCCC;
background-image:url(../img/header_left.gif);
color:#666666;
height:123px;
width:428px;
}
#headerright {
position: absolute;
left: 432px; /*left width + your 5px border */
top: 0;
background-color:#CCCCCC;
height: 123px;
width:262px;
}

Repeat the relatively positioned container with absolutely positioned interior divs. This would offer some problems with variable height page elements but not on this page. Even if the main content were not fixed height, I'd still recommend this solution for your header, footer, and navigation section, which are fixed height.
Copy linkTweet thisAlerts:
@johnshawauthorJul 12.2007 — Hi Mac

Thanks for the advice - used the Horizontal wrapper technique and the 'Holly Hack' and it seems to have worked.

The area I had an issue with was with the nested divs at the base of the left hand column. But adding the wrappers seems to have done the trick.

http://www.pointsize.co.uk/cowgate/copyofindex.html

Cheers

John
Copy linkTweet thisAlerts:
@macthewebJul 13.2007 — Hi John,

I forgot to say that's an attractive and interesting site,

Mac
×

Success!

Help @johnshaw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...