/    Sign up×
Community /Pin to ProfileBookmark

Floating problems and 960 grid

Copy linkTweet thisAlerts:
Dec 18.2009

I’m using 960grid for my CSS and everything seems to be working fine. Only issue I’m having is with IE6. All the floated elements are stacking on the left. I’ve tried hunting down the problem in the CSS and HTML and can’t find anything. To the best of my knowledge this shouldn’t be happening.

Can anyone spot anything with a really quick look through?

Here’s the url: [url]http://dev1.twinmed-dev.com/test.html[/url]

Thanks!

Edit: There also seems to be a problem with the js, sending up an error in IE… I’m still trying to figure that one out too.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@bejitto101authorDec 18.2009 — I know what is causing the issue... but I don't know how to fix it. Here is a better explanation of what I see going on.

IE6 is giving me issues of course. I'm having problems with my layout using percents. The code I have looks like the following:
[code=html]
 <div style="width: 92&#37;; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
<div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; background-color: blue; height: 20px;"></div>
<div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 73%; background-color: yellow; height: 20px;"></div>
</div>[/code]

So the inner two divs both have right and left margins of 1%, so a total of 4% of margins. Then the widths are 23% and 73% for a total of 96% width for the inner divs. So adding the margins and widths together, we come out to a nice 100%.

But IE6 for some reason doesn't agree, and breaks my two inner divs and places each on a new line. Does anyone know why? It works for every other browser. I took care all of the IE6 bugs I could think. The display: inline should take care of the double margin bug, and it doesn't appear to be an issue.

Here's the url if anyone wants to see it in action: http://dev1.twinmed-dev.com/test.html

Thanks for any help!
Copy linkTweet thisAlerts:
@FangDec 18.2009 — Link doesn't work
Copy linkTweet thisAlerts:
@ArtphotoasiADec 18.2009 — maybe I'm wrong but as far as i know [CODE]display:inline[/CODE] it works with that kind of I6 bug only for the XHTML tags like OL UL LI and similar inline elements, not for a div....

you must create a .CSS file dedicated I6 and fix the margin and the padding in a way that can keep things in the right place, this is the way i have followed on in my web...

PS... if you can avoid &#37;
Copy linkTweet thisAlerts:
@bejitto101authorDec 18.2009 — The links working fine for me, is it giving you a 404 or some such?
Copy linkTweet thisAlerts:
@thraddashDec 18.2009 — Just a cleanup, hope its what you want:

[code=html]<!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>TODO supply a title</title>
</head>
<body>
<div style="width: 92&#37;; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
<div style="display: inline; float: left; margin-left: 1%; width: 23%; background-color: blue; height: 20px;"></div>
<div style="display: inline; float: left; margin-left: 2%; width: 73%; background-color: yellow; height: 20px;"></div>
</div>
</body>
</html>[/code]
×

Success!

Help @bejitto101 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...