Safari CSS difficulty. 2

[oppcos]

Hi,
I have a page that I've been working on getting cross-browser possitioning with just XHTML and CSS. So far, so good, I've got all the browsers playing ball except Safari. The effect is to have a div with a min-width but which is positioned relative to both the left and the right sides of the browser window. In all other (non-IE) browsers I accomplish this effect with this code:

<div style="left: 30px; 
            right: 30px; 
            min-width: 200px;
            background-color: #EE1111;">Effect here.</div>

In other browsers, the div stops shrinking at 200px and you start scrolling if the window gets too small. In Safari, as soon as I add the 'right' style, the min-width gets broken. Is there any other way (even just Safari specific, but preferably would work with Gecko too) to acheive the effect I'm after?

Thanks!!!

 

[ChrisHunt]

Erm, Why not just

margin: 0 30px;
min-width: 200px;

No need for any positioning.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

You'll also need a

text-align:center

to make IE play ball too.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[oppcos]

Well, by positioning it relative to both the left and the right, the div will actually grow and shrink depending upon the size of the window. Anyway, it is no longer an issue! I just did a Safari update and the problem was patched! It works everywhere (but IE which uses a different method) now, but thanks for the suggestions!

 

[Foamcow]

I was half asleep when I posted before...

body { text-align:center; } /* For IE */

#myDiv {
margin: 0 auto;
width: 200px;
min-width: 200px;
background-color:#ccc;
text-align:left; /* to counter previous IE 'Hack' */
}

That should work perfectly (at least in IE and Firefox)

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[oppcos]

Foamcow, I'm afraid that's still not even related to what defining 'right' and 'left' for an absolute or fixed positioned div does (not centering), but like I said, it was a bug in Safari that Apple apparently fixed with an update, so all is well.

Thanks for the help!

 

[oppcos]

(An example always helps. Didn't put in the code for the IE effect, so only look in Safari, Gecko.)

 

[oppcos]

Darn easy to click Submit Post so close to Process TGML help so I could figure out how to put in the link.... *sorry*! <-- That's an example link.

 

[Foamcow]

Yes you are right. I didn't read the question properly <shame!>

However as Chris said, you don't need to use positioning, margins work fine.

http://www.fantasticmachine.co.uk/development/widthTest/widthTest.html

In my version of Safari, that works in the same way as your example, yet uses margins and no positioning.

Unless you need to use absolute positioning for a particular reason, I would say keeping the <div> in the document flow would be preferable.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

Actually stet that.

My version shows scrollbars and doesn't go below 450px wide whereas your's collapses until the browser reaches it's limit.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

tsk... 400px wide, not 450px

I need to go lie in a dark room.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[oppcos]

I need to go lie in a dark room.

That's how I've been feeling, for sure!!

OK, you two are geniuses. I love the margin method. I don't know why I brushed off using margin before, but once you get something in your head with this XHTML/CSS business, sometimes you can get so focused on fixing the wrong solution you don't see the simple things. Thanks a million!

P.S. What version of Safari are you using Foamcow?

 

[Foamcow]

umm...

1.3 (v312)

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r