Hi all
I have a problem with a layout I am working on and would appreciate any help you can offer.
The problem is that pre version 7, IE does not support min-width. I am aiming at a layout with a fixed width left column (div floated left), a fixed width right column (div floated right) with a mid column occupying 100% of the space between the 2 outer divs. However, I want the mid div to be a minimum width of, say, 500px.
I've tried a few things:
A CSS only idea I have seen (at ht tp://www.webreference.com/programming/min-width/) of having a transparent 500px left border, with the text indented -500px so it overlays the border. This almost works, but when the window is reduced in size, the mid div pops from the middle below the outer divs. (sorry I have wiped out the example I was working on but hope you get the idea rom this description!)
Closest I have managed to get is with a simlpe hack to write a table for pre IE 7 browsers (demonstrated at ht tp://www.justdine.com/justdine/widthtest.aspx). Of course the only problem now is that when the window is expanded, the text only expands up to the width of the table!
I hope to avoid any javascript based solution... any ideas anyone?
Cheers
Subscribe to HRA Now!
SEO Class in Chicago, IL
Learn How To Optimize Your Website on July 26, 2013
Looking for personalized in-depth SEO training among your peers?
High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!
Are you a Google Analytics enthusiast?
Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!
www.CustomReportSharing.com
From the folks who brought you High Rankings!
More SEO Content
International SEM | Social Media | Search Friendly Design | SEO | Paid Search / PPC | Seminars | Forum Threads | Q&A | Copywriting | Keyword Research | Web Analytics / Conversions | Blogging | Dynamic Sites | Linking | SEO Services | Site Architecture | Search Engine Spam | Wrap-ups | Business Issues | HRA Questions | Online Courses
Pre Ie7 Min Width Problem
Started by
scouseflip
, Jan 29 2008 08:34 AM
9 replies to this topic
#1
scouseflip
-
- Active Members
-
- 201 posts
HR 4
- Location:North West, England
Posted 29 January 2008 - 08:34 AM
#2
Dimmerswitch
-
- Active Members
-
- 72 posts
HR 3
- Location:Madison, Wisconsin
Posted 29 January 2008 - 01:04 PM
QUOTE(scouseflip @ Jan 29 2008, 07:34 AM) 
The problem is that pre version 7, IE does not support min-width. I am aiming at a layout with a fixed width left column (div floated left), a fixed width right column (div floated right) with a mid column occupying 100% of the space between the 2 outer divs. However, I want the mid div to be a minimum width of, say, 500px.
In these cases, I've generally set a fixed width in a rule that only gets applied by IE 6 or below.
So if you had a div (id 'parent') containing your columns (ids 'left' 'right' and 'main), you might have the following CSS:
CODE
#left {float:left; width:180px;}
#right {float:right; width:150px;}
#parent {min-width:880px;} /* 500px center plus 330px for columns */
* html #parent {width:880px;}
#right {float:right; width:150px;}
#parent {min-width:880px;} /* 500px center plus 330px for columns */
* html #parent {width:880px;}
Users on IE6 and below will get what is effectively a fixed-width version of your site, but that's a tradeoff I'm usually willing to make - I haven't found any approaches which rely on propping it open to a minimum width that don't cause more headaches than they solve.
#3
piskie
-
- Active Members
-
- 1,092 posts
HR 7
- Location:Cornwall
Posted 29 January 2008 - 07:38 PM
Have you tried putting a "spreader" transparent image into the mid div such as 500x1.gif. This would allow the div to be bigger than 500 but not smaller
#4
scouseflip
-
- Active Members
-
- 201 posts
HR 4
- Location:North West, England
Posted 30 January 2008 - 06:36 AM
Thanks folks, I'll give these a go this afternoon. I'll let you know how it works!
#5
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 30 January 2008 - 07:30 AM
FWIW I wouldn't recommend using the older * html type of hacks for IE6. Doing so can really mess things up for IE7, which seems to be a lot closer in most css compliance standards than any previous version of IE. It still has a few quirks, but it's not nearly as bad as IE6 and previous versions.
What I do instead is create a base css file that gets used by every browser, and ends up being the only css file used by fully compliant browser. Then for the small tweaks I need to make for IE6 or IE7 I use its Conditional Comments functionality to apply the tweaks. These conditional comments are put right in the html code, and I've found having the separate css files is a great way to compartmentalize things so that my css files remain somewhat sane.
For example, if I had a page where I needed to tweak some element for IE6 and tweak the same element or something else entirely for IE7 my html file would look like:
In the above Conditional Comments lt means Less Than and gte means Greater Than or Equal To.
The main.css file would contain all of my css rules. The main.ie6.css would contain only those rules that need to be tweaked for IE6, and since it's loaded after the main.css file those settings will override whatever is in the main.css file. Same for the main.ie7.css file, except that it'll only contain special tweaks for IE7.
Quick, easy and sensible. All things I like.
What I do instead is create a base css file that gets used by every browser, and ends up being the only css file used by fully compliant browser. Then for the small tweaks I need to make for IE6 or IE7 I use its Conditional Comments functionality to apply the tweaks. These conditional comments are put right in the html code, and I've found having the separate css files is a great way to compartmentalize things so that my css files remain somewhat sane.
For example, if I had a page where I needed to tweak some element for IE6 and tweak the same element or something else entirely for IE7 my html file would look like:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<!-- Base CSS rules -->
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<!-- CSS for IE 6 and below -->
<!--[if lt IE 7]>
<link href="/css/main.ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- CSS for IE 7 and above -->
<!--[if gte IE 7]>
<link href="/css/main.ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<!-- Base CSS rules -->
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<!-- CSS for IE 6 and below -->
<!--[if lt IE 7]>
<link href="/css/main.ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- CSS for IE 7 and above -->
<!--[if gte IE 7]>
<link href="/css/main.ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
In the above Conditional Comments lt means Less Than and gte means Greater Than or Equal To.
The main.css file would contain all of my css rules. The main.ie6.css would contain only those rules that need to be tweaked for IE6, and since it's loaded after the main.css file those settings will override whatever is in the main.css file. Same for the main.ie7.css file, except that it'll only contain special tweaks for IE7.
Quick, easy and sensible. All things I like.
#6
Dimmerswitch
-
- Active Members
-
- 72 posts
HR 3
- Location:Madison, Wisconsin
Posted 30 January 2008 - 08:29 AM
QUOTE(Randy @ Jan 30 2008, 06:30 AM)
FWIW I wouldn't recommend using the older * html type of hacks for IE6. Doing so can really mess things up for IE7, which seems to be a lot closer in most css compliance standards than any previous version of IE. It still has a few quirks, but it's not nearly as bad as IE6 and previous versions.
What I do instead is create a base css file that gets used by every browser, and ends up being the only css file used by fully compliant browser. Then for the small tweaks I need to make for IE6 or IE7 I use its Conditional Comments functionality to apply the tweaks. These conditional comments are put right in the html code, and I've found having the separate css files is a great way to compartmentalize things so that my css files remain somewhat sane.
What I do instead is create a base css file that gets used by every browser, and ends up being the only css file used by fully compliant browser. Then for the small tweaks I need to make for IE6 or IE7 I use its Conditional Comments functionality to apply the tweaks. These conditional comments are put right in the html code, and I've found having the separate css files is a great way to compartmentalize things so that my css files remain somewhat sane.
While I don't share the aversion to * html rules, I'm not sure Randy and I are necessarily on different pages here.
The specific issue at hand here is "IE6 doesn't support min-width, but IE7 does". I don't think the * html rule is a poor fit for that problem, but reasonable people can certainly disagree.
That said, I agree with Randy that it often makes sense to consolidate the hacks needed for older IE versions into a single file, and use conditional comments to pull it in as-needed.
Here's an example from a recent project (with extraneous markup removed).
CODE
<!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" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
/*<![CDATA[*/
@import'/css/main.css';
/*]]>*/
</style>
<!--[if lt IE 7]>
<![if gte IE 5.5]>
<link rel="stylesheet" type="text/css" href="/css/fixes_old_ie.css" />
<![endif]>
<![endif]-->
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
/*<![CDATA[*/
@import'/css/main.css';
/*]]>*/
</style>
<!--[if lt IE 7]>
<![if gte IE 5.5]>
<link rel="stylesheet" type="text/css" href="/css/fixes_old_ie.css" />
<![endif]>
<![endif]-->
</head>
<body>
</body>
</html>
You can see a live site with this approach at http://www.heartaikido.com/.
#7
scouseflip
-
- Active Members
-
- 201 posts
HR 4
- Location:North West, England
Posted 30 January 2008 - 08:56 AM
Hi all and thanks for the help.
I have gone for the hack suggested by Dimmerswitch but with Randy's suggested method of implementing it. Unfortunatly, the img idea wouldn't work as the image and the other div content still got pushed below the outer columns when the window was reduced - cheers for the idea though Piskie!
Out of interest, the reason I wated to get this layout working was that I have previously always made sites with a fiwed width 'canvas' and with this centered in the window. Recently I have noticed Analytics show a much larger % of visitiors viewing the page in a widescreen format - I have always fixed the 'canvas' size around 750-800px which leaves gaping white spaces either side of my page. This is just my attempt at filling the space really!
I'd be interested to know if others had a screen resolution in mind when designing new pages and if so, what and why? But I have put this in a new thread in what I hope is a more suitable forum!
Thanks again
I have gone for the hack suggested by Dimmerswitch but with Randy's suggested method of implementing it. Unfortunatly, the img idea wouldn't work as the image and the other div content still got pushed below the outer columns when the window was reduced - cheers for the idea though Piskie!
Out of interest, the reason I wated to get this layout working was that I have previously always made sites with a fiwed width 'canvas' and with this centered in the window. Recently I have noticed Analytics show a much larger % of visitiors viewing the page in a widescreen format - I have always fixed the 'canvas' size around 750-800px which leaves gaping white spaces either side of my page. This is just my attempt at filling the space really!
I'd be interested to know if others had a screen resolution in mind when designing new pages and if so, what and why? But I have put this in a new thread in what I hope is a more suitable forum!
Thanks again
#8
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 30 January 2008 - 09:37 AM
Where you need to be careful with * html instructions is that those are understood by IE7 DS. So if you happen to use it for an IE6 fix that IE7 already renders properly you'll end up breaking the page for IE7 users. Nasty situation that! This is why I don't like 'em as a blanket rule, especially if it's all in one CSS file.
I don't have any issue with * html when conditional comments are also in the mix to direct each browser to its proper css file.
IMO It's just easier to control what happens by employing multiple css files for the tweaks and Conditional Comments to handle the hand off depending upon the browser being used. As far as I know the Conditional Comments are Windows only things, so every other browser ignores those.
I don't have any issue with * html when conditional comments are also in the mix to direct each browser to its proper css file.
IMO It's just easier to control what happens by employing multiple css files for the tweaks and Conditional Comments to handle the hand off depending upon the browser being used. As far as I know the Conditional Comments are Windows only things, so every other browser ignores those.
#9
Dimmerswitch
-
- Active Members
-
- 72 posts
HR 3
- Location:Madison, Wisconsin
Posted 30 January 2008 - 10:31 AM
QUOTE(Randy @ Jan 30 2008, 08:37 AM)
Where you need to be careful with * html instructions is that those are understood by IE7 DS. So if you happen to use it for an IE6 fix that IE7 already renders properly you'll end up breaking the page for IE7 users. Nasty situation that! This is why I don't like 'em as a blanket rule, especially if it's all in one CSS file.
I think I see where the disconnect is, if I'm understanding Randy's post correctly. Randy, you seem to be asserting that IE7 will apply any CSS rules which begin with * html
That's actually incorrect. At least when rendering in standards mode (triggered by having a valid DOCTYPE), IE7 will correctly refrain from applying any * html CSS rules.
I've done a quick test case to show this - it's visible at http://thrumdesign.c...tml-select.html. I'll add a screenshot showing IE6 and IE7 renderings of the page, for folks who don't have ready access to both browsers.
Attached Thumbnails
#10
Randy
-
- Moderator
-
- 17,540 posts
Convert Me!
Posted 30 January 2008 - 12:54 PM
Agreed DS.
But how many pages do you see that actually carry a correct doctype to force IE out of quirks mode?
We agree. I'm just being ultra careful because I know people are going to be reading and applying recommendations, without fully understanding all of the intricacies involved. With the use of conditional comments to target different css rules for the various versions of IE it all quickly becomes a non-issue.
But how many pages do you see that actually carry a correct doctype to force IE out of quirks mode?
We agree. I'm just being ultra careful because I know people are going to be reading and applying recommendations, without fully understanding all of the intricacies involved. With the use of conditional comments to target different css rules for the various versions of IE it all quickly becomes a non-issue.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
