473,372 Members | 1,059 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

Liquid design: Horizontal centering + overflow: hidden = problem in IE6

As part of my explorations in liquid design, I'm exploring ways to use the
overflow: hidden property -- when browser windows become too narrow, I want
(some) images to get cropped rather than have the layout break up. In some
cases, losing parts of images can be an interesting option.
http://www.hebig.org/blog/titlepic.php was the first example I found, and
it's quite nifty. His image works well when progressively cropped from the
right, in my case, I'm also trying to get the images to get cropped equally
from both sides, leaving the (presumably interesting) center area to be
displayed.

I have a test page up
(http://www.blaqzone.com/Temp/Centere...Overflow.html), and it works
fine in Mozilla -- but not in IE6/PC. Are there any curious souls out there
who would like to have a peek? Is there a cross-browser way to do this?

Jul 20 '05 #1
5 14627
>
I have a test page up
(http://www.blaqzone.com/Temp/Centere...Overflow.html), and it works
fine in Mozilla -- but not in IE6/PC. Are there any curious souls out there who would like to have a peek? Is there a cross-browser way to do this?

Hi
Your DTD puts IE6 in quirks mode. Try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and see if IE6 plays ball now.
HTH
David
Jul 20 '05 #2
David Graham wrote:
Your DTD puts IE6 in quirks mode. Try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and see if IE6 plays ball now.


Setting IE6 to Standards mode does work better: the images are now centered
in their DIVs. Unfortunately, the overflow does not get hidden.

1) Time to do some research on IE6(Standards) vs. overflow:hidden
2) If I'm going to use this technique, I'd better find a way for Quirks mode
to also work, since tons of people use IE5.

David, any further thoughts?

--Charles, whose life would be *so much* simpler if he could just limit
himself to fixed-width layouts...

Jul 20 '05 #3

"Charles Blaquière" <bl**@interlog.com> wrote in message
news:Si********************@news01.bloor.is.net.ca ble.rogers.com...
David Graham wrote:
Your DTD puts IE6 in quirks mode. Try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and see if IE6 plays ball now.
Setting IE6 to Standards mode does work better: the images are now

centered in their DIVs. Unfortunately, the overflow does not get hidden.

1) Time to do some research on IE6(Standards) vs. overflow:hidden
2) If I'm going to use this technique, I'd better find a way for Quirks mode to also work, since tons of people use IE5.

David, any further thoughts?

Hi Charles
I know IE (all versions) has some odd ways of handling the overflow
property. One mistake it makes is with
overflow: visible;
Instead of letting the contents spill out of the containing div, IE expands
the div so that it is big enough to fit the contents. A nice link explaining
how different browsers handle overflow is

http://www.xs4all.nl/~ppk/css2tests/overflow.html

I dont think IE has problems with hidden though!
Try removing the multiple classes incase its an issue related to that.

As for presenting IE5 and IE5.5 with sonething different to IE6 (standard
mode) I use conditional comments. These don't rely on any browser sniffing
and are quite safe and reliable. A useful link on this is

http://msdn.microsoft.com/library/de...thor/dhtml/ove
rview/ccomment_ovw.asp

I had a problem with older versions of IE not rendering the position of my
nav div correctly so I stuck the lines below into each page and it solved
the problem.

<![if lt IE 5.5000]>
<DIV ID="navigation">
<![endif]>

<!--[if IE 5.5000]>
<div id="navigation" style="left: -220px;">
<![endif]-->

<!--[if IE 6]>
<div id="navigation" style="left: -205px;">
<![endif]-->

Watch out for spaces in the above i.e the must be a space between each
seperate bit inside the square brakets. I'm basically saying above that if
IE less than version 5 (lt = less than) use the navigation div as it is, if
you IE5 then do the correction to the left position and if your IE6 then do
this other left correction. (OT) Having said all that, someone in this
group, might have been Toby, experimented for me and found out that IE did
not like my left: 0 - anyway it wasn't really necessary and when I took out
left: 0; it all worked the same in all IE versions.

HTH
David


Jul 20 '05 #4

and it solved
the problem.

<![if lt IE 5.5000]>
<DIV ID="navigation">
<![endif]>

<!--[if IE 5.5000]>
<div id="navigation" style="left: -220px;">
<![endif]-->

<!--[if IE 6]>
<div id="navigation" style="left: -205px;">
<![endif]-->

Watch out for spaces in the above i.e the must be a space between each
seperate bit inside the square brakets. I'm basically saying above that if
IE less than version 5 (lt = less than)


woops - meant version 5.5000
Jul 20 '05 #5
There seem to be two methods available for cropping images that don't fit
within their container. (e.g. when the browser window is resized way too
small) We can place the image in a div and give the div the "overflow:
hidden" style, or we can define the image as a background for the div.
Background images, having been around much longer than the CSS2 overflow
property, would presumably be more reliable.

My first test [ http://www.blaqzone.com/Temp/Centere...nOverflow.html ]
occasionally gave funky results in IE, so I temporarily set it aside and
tried the background-image route. [
http://www.blaqzone.com/Temp/Centere...ckground).html ]
seems to work better, so I decided to put it to work in a test page using
the layout from the target site:

http://www.kpuc.org/events/90th-anniversary-test.html

The images crop well, making the page much sturdier at narrow browser
widths. However, my ambitious nature gave rise to a desire to find a
generalized technique, one that would allow images to:

- crop from the left
- crop from the right
- crop from both sides

and allow me to place images:

- mostly left-aligned in their container
- centered in their container
- mostly right-aligned in their container

Examples such as http://www.hebig.org/blog/titlepic.php crop a left-aligned
image from its right edge -- but what happens if the important material is
on the right, not the left, of the image? This is why I'm hoping to come up
with a generalized technique allowing maximum design flexibility.

Please have a look at the test page. I've hit a block at this point. Thanks!

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Pal Csepregi | last post by:
Hi can i remove somehow the horizontal scrollbar? just the horizontal! Thx PallR
1
by: Peter Mount | last post by:
Hi When I zoom into my site (http://www.petermount.au.com) with Opera 7.54 the horizontal scrollbar doesn't show when the site image is bigger than my screen. Yet the horizontal scrollbar shows...
3
by: dan | last post by:
Hi folks, I have a very simple requirement - I want to have a row of divs of fixed size (but unknown number of them) This will be in a container div and scrolled by other means Is there any...
10
by: jlub | last post by:
What I'm trying to do is have two different sets of input elements which occupy the same space on the page, only one of which is visible at a time. You switch between the two with a bit of...
2
by: musicmouse | last post by:
Happy new year to you all, I have a problem with the css settings for the horizontal scrollbar of a textarea. When I look at my textarea's in Internet Explorer (I use 5.5) I see only a...
2
by: Eduard | last post by:
I have a ASP.Net datagrid wrap in the following div: <DIV id="divPart2" style="OVERFLOW: hidden">. Another div controls the horizontal scrolling: <DIV id="scroll1" style="OVERFLOW: scroll;...
0
by: mjohnson0321 | last post by:
I am trying to incorporate a CSS drop-down menu into a site (suckerfish menu). The menu gets lost behind the content below it, but only on one of the drop downs (News). The error occurs on all of...
3
by: kenny bones | last post by:
Hi! I'm currently working on a menu which is based on CSS and is listed with <li> tags. The CSS code looks like this: #nav { position: absolute; top: 101px; left: 390px; list-style: none;...
1
by: newbie009 | last post by:
How can I disable horizontal scroll in textbox for FireFox? Right now 1 textbox has vertical scroll and other textbox has horizontal scroll. It only looks like this on FireFox but it looks ugly....
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.