Safari with box model problems

@DisfunctionalJun 02.2008

Hi,

I have been working on a rather large website to deliver to a client, but due to the rushed nature never had a chance to test it fully in Safari.

I have run into a massive problem which makes most of my divs a shorter width than they should be.

For example i have a right column area called ‘extra ‘which has a div inside it called ‘extraBox’ – below is the code:

[code] #extra { float: right; width: 228px; }

.extraBox { width: 208px; padding: 10px; background: #333; }[/code]

This works fine in IE6, IE7 and Firefox – the box inside fills out to 228px, but in Safari it is still keeping the boxes at a pixel width of 208px – so its 188px wide + 10px padding = 208px which is wrong ?

Does anyone know how to fix this problem, I would be very grateful for any advice

to post a comment

CSS

11 Comments(s) _↴

@WebJoelJun 02.2008 — #Why not "width:100%;" and let ".extraBox" completely fill the parent and the browser makes the calulations for any added padding automatically? ?

(I'm going to have to re-create this and test on Safari..)

@WebJoelJun 02.2008 — #Using you code, I tried this, tested on SAFARI-on-XP, Firefox and IE-view (from Firefox), -looks to be the same width to me.. ?

Can you show your site, or post more code?

[upl-file uuid=df44b637-430b-4ec0-ac73-b8fcf9a97500 size=29kB]TEST.jpg[/upl-file]

@DisfunctionalauthorJun 02.2008 — #Hiya,

Here is the full example:

http://www.undertow.co.uk/misc/misc/test/test.html

It has a wrapper which is 860px wide. If you look at it in IE6, IE7 or Firefox eveyrthing matches up width wise with the black nav bar at the top.

If you look at it in Safari the middle box #info which also has a .infoBox (the dark gray featured event box) which is not stretching correctly.

The area on the right (#extra) has the box components i was talking about and you can see it does not quite reach the right edge.

I have tried setting 100% on the extra box which indeed fixes it for Safari but then breaks it for every other browser.

I need to be able to set widths on the boxes as there needs to be specific sized content put into them etc

Any help would be really great - needing to deliver this today ?

@WebJoelJun 02.2008 — #<div class="[B]infoBox boxType2[/B]">[/QUOTE] Is this ONE class, -or TWO? "whitespaces" in non-contiguous class/id names suggests "two" class/id. Typically, seperate with a "comma" to cause both to function, else, neither might be recognized(??) (still testing...)

@DisfunctionalauthorJun 02.2008 — #Hi,

These are two classes. They need to theme those boxes so the first class gives it the layout and the second one the link, background and color styling etc

Thanks for having a look at this for me ?

@WebJoelJun 02.2008 — #<div class="infoBox[SIZE=4][COLOR=Red][B],[/B][/COLOR][/SIZE] boxType2" [COLOR=Red][B]style="padding:10px;"[/B][/COLOR]>

<h3>Featured event</h3>

 <img src="images/ph_placeholder3.jpg" alt="" class="prThumbnail3" />
 
   <h4>Event name</h4>
 
   <p>Date</p>
 
   <p>Nulla ut lectus. Duis pretium, lacus.... [/QUOTE] [COLOR=Red][B]These changes[/B][/COLOR] [I]seem[/I] to make this work for Safari and look the same (more-or-less) in my IE-based html-editor... (sorry for the delay... had to run down to the city for a few hours when I read your post... had just *minutes* to run & catch the bus..).

Image shows IE and Safari (forgot which one is which), but seperating the classes with a "comma" and adding "10px" padding to DIV seems to solve this

[upl-file uuid=cbcb3db2-4fc4-4815-8679-8d99dcc0efdc size=43kB]saf-IE.jpg[/upl-file]

@CentauriJun 02.2008 — #seperating the classes with a "comma"[/QUOTE]

That is not exactly standard is it ? - normally multiple class names are separated by a space.

@WebJoelJun 02.2008 — #Wasn't sure (and suspect that comman isn't permitted) and maybe that is why the parent DIV then requires the inline style of "padding:10px;" that becomes 'lost'. The comma 'invalidates' the second CLASS? ? But it 'solved' the problem (at least, visually) when viewed in Safari and IE etc..

Mac has trouble with 'whitespaces' in multiple classes:

http://dhtmlkitchen.com/learn/css/multiclass/index2.jsp

....Multiple Classes in Internet Explorer for Macintosh

Internet Explorer for Macintosh does not properly handle multiple classes because its HTML parser does not properly handle whitespace in the class attribute.

For any element has a class specified where that class is a substring of another class selector defined in the stylesheet, the rule for the other selector will apply to that element.

Example....[/QUOTE] IE for Mac: not the same as SAFARI, but there is a connection with "mac" and Mac computers have their own 'quirks' too... So my solution was a 'hack' that, although seemingly satisfies Safari and works on my IE-based html editor, there lies a better solution. Maybe 'combining' classes like:

(CSS)

: div[I]foo[/I] { .class1.class2 }

and

(HTML) : ....class="class1" class="class2"....

and thus, the 'whitespace in multiple classes' has been eliminated..

@DisfunctionalauthorJun 03.2008 — #Hiya,

Thanks for all your help so far on this - is really appreciated.

I tried the fix and it kinda works - the problem though is that I need to be able to fix the layout via the css i.e. the client as part of the spec had demanded no inline styles.

Basically we update the stylesheet remotely as they are going to create 100's of pages from this template as well as change the class type to manipulate the background colour on each of the boxes.

I really don't know how to fix this and is rather frustrating working to standards while the apparent 'standards compliant browser' doesn't even seem to be working properly.

Any other ideas please would be really appreciated otherwise I don't know what to explain to them - all seems rather frustrating after working on it for ages ?

@DisfunctionalauthorJun 03.2008 — #[B]Update: [/B]

I have managed to fix it ?

In my css I had added the css 'display: table;' to the boxes to make the background of the boxes stretch the full length in Firefox.

I have just taken this off as a test and sure enough it all works fine - am very happy as was wondering why Safari was acting the way it did - seems it was me in the wrong

Thanks for the help - now hopefully this won't affect anything else, fingers crossed

@WebJoelJun 03.2008 — # ....was wondering why Safari was acting the way it did - seems it was me [I]in the wrong[/I][/quote] Yes, -to a degree. It was doing correctly only what it knows how to do... The CSS-parser for mac-browser isn't quite the same as 'others'. I have encountered issues with Mac-browsers like this (although, not being able to read 'whitespace in multiple class-names' is one that I wasn't familiar with..). Only have [I]Safari-on-XP[/I] though, can't test/understand them all. :o

And, -there is almost always, [I]several ways to solve any problem like this[/I]. ?

Also in #CSS _↴

Re-size a column in Wordpress Can't set a table height 100%css3 gradient and border-radius

Success!

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

Tweet This

Safari with box model problems

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Safari with box model problems

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴