Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Safari Problem (Mac)

Reply
Thread Tools

CSS Safari Problem (Mac)

 
 
0dev
Guest
Posts: n/a
 
      07-13-2007
I'm trying to fix a CSS problem in Safari on Mac.

The following page displays fine on Firefox and IE on Windows and
Linux:
http://tinyurl.com/2w9nl3

The page has the following errors on Safari/Mac:
http://tinyurl.com/3yoj83
http://tinyurl.com/3xsdc2

The problem is in the footer section (marked in the code with
comments).

The CSS for that footer section is found at the bottom of this CSS
file:
http://tinyurl.com/32yk7p

Why isn't it displaying correctly in Safari/Mac?

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      07-13-2007
In article
<(E-Mail Removed). com>,
0dev <(E-Mail Removed)> wrote:

> I'm trying to fix a CSS problem in Safari on Mac.
>
> The following page displays fine on Firefox and IE on Windows and
> Linux:
> http://tinyurl.com/2w9nl3
>
> The page has the following errors on Safari/Mac:
> http://tinyurl.com/3yoj83
> http://tinyurl.com/3xsdc2
>
> The problem is in the footer section (marked in the code with
> comments).
>
> The CSS for that footer section is found at the bottom of this CSS
> file:
> http://tinyurl.com/32yk7p
>
> Why isn't it displaying correctly in Safari/Mac?


In a sense, it does not display properly on any browser. Forget
the countless reported validation errors, you have managed to
somehow "fix" the font size of everything but "latest jazz news"
and the calendar. And then they do break at bigger text sizes.

--
dorayme
 
Reply With Quote
 
 
 
 
0dev
Guest
Posts: n/a
 
      07-13-2007
On Jul 13, 7:27 pm, dorayme wrote:
> In article


> > Why isn't it displaying correctly in Safari/Mac?

>
> In a sense, it does not display properly on any browser. Forget
> the countless reported validation errors, you have managed to
> somehow "fix" the font size of everything but "latest jazz news"
> and the calendar. And then they do break at bigger text sizes.


I didn't write the code except the footer links. I'm just trying to
get a footer that will display on Safari/Mac as well as FF and IE.

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-14-2007
0dev wrote:
> On Jul 13, 7:27 pm, dorayme wrote:
>> In article

>
>>> Why isn't it displaying correctly in Safari/Mac?

>> In a sense, it does not display properly on any browser. Forget
>> the countless reported validation errors, you have managed to
>> somehow "fix" the font size of everything but "latest jazz news"
>> and the calendar. And then they do break at bigger text sizes.

>
> I didn't write the code except the footer links. I'm just trying to
> get a footer that will display on Safari/Mac as well as FF and IE.
>


Think about this for one moment, even though you did not write the other
code, if it is so malformed what are the chances that something you
*add* would display properly without repairing what precedes it?

Put this another way, no matter how well you construct a roof it will
not hold up if the building and foundation are poorly constructed.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
cwdjrxyz
Guest
Posts: n/a
 
      07-14-2007
On Jul 13, 4:58 pm, 0dev <(E-Mail Removed)> wrote:
> I'm trying to fix a CSS problem in Safari on Mac.


> The following page displays fine on Firefox and IE on Windows and
> Linux:http://tinyurl.com/2w9nl3


Using the new Safari 3 for Windows on the XP OS, I see the problem
also. I do not see the problem on Opera. This sort of problem
sometimes can take a lot of time to solve. I would first get the page
to validate as html 4.01 at the w3c validator. This may not solve the
problem, buy at least you will have fewer potential problems to worry
about. I sometimes find it more easy to write a new page than modify
one someone else wrote. Everyone has their own style, and good
documentation of what someone else had in mind often is missing.



> The page has the following errors on Safari/Mac:http://tinyurl.com/3yoj83http://tinyurl.com/3xsdc2
>
> The problem is in the footer section (marked in the code with
> comments).
>
> The CSS for that footer section is found at the bottom of this CSS
> file:http://tinyurl.com/32yk7p
>
> Why isn't it displaying correctly in Safari/Mac?



 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-14-2007
In article
<(E-Mail Removed). com>,
cwdjrxyz <(E-Mail Removed)> wrote:

> On Jul 13, 4:58 pm, 0dev <(E-Mail Removed)> wrote:
> > I'm trying to fix a CSS problem in Safari on Mac.

>
> > The following page displays fine on Firefox and IE on Windows and
> > Linux:http://tinyurl.com/2w9nl3

>
> Using the new Safari 3 for Windows on the XP OS, I see the problem
> also. I do not see the problem on Opera. This sort of problem
> sometimes can take a lot of time to solve.


Yes, you can say that again. <g>

Actually I came on back here to see if anyone has an answer to
something that I have wanted but could not figure: in FF
developer tools, you can outline elements and their css paths are
are displayed in a field at top. How to be able to copy paste the
text in the field?

I was going to make a point to the OP about the line .... I force
myself to type it from a screenshot I kept, something like:

html > body > div#wrapper > div#MainRed > table > tbody > tr >td
> table.footer-box> tbody > tr > td > table.footer-box > tbody> tr > td.listhostels > a


No point in making a rude point about it now. But does anyone
know a way of telling the field to stay still while the mouse
gets there to copy it? Happily the Mac screenshot controls of
Shift + Command + 4 "fixes" the mouse pointer while a snap is
taken...

--
dorayme
 
Reply With Quote
 
Sherm Pendley
Guest
Posts: n/a
 
      07-14-2007
dorayme <(E-Mail Removed)> writes:

> Actually I came on back here to see if anyone has an answer to
> something that I have wanted but could not figure: in FF
> developer tools, you can outline elements and their css paths are
> are displayed in a field at top. How to be able to copy paste the
> text in the field?


Mouse over an element, then *without moving the mouse* use cmd-tab to
switch to another app. Then select the FF window's title bar to switch
back; because all of the "mouse moved" events were sent to another app,
and the mouse pointer is now outside the document area, the CSS path
field hasn't changed.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-14-2007
In article <(E-Mail Removed)>,
Sherm Pendley <(E-Mail Removed)> wrote:

> dorayme <(E-Mail Removed)> writes:
>
> > Actually I came on back here to see if anyone has an answer to
> > something that I have wanted but could not figure: in FF
> > developer tools, you can outline elements and their css paths are
> > are displayed in a field at top. How to be able to copy paste the
> > text in the field?

>
> Mouse over an element, then *without moving the mouse* use cmd-tab to
> switch to another app. Then select the FF window's title bar to switch
> back; because all of the "mouse moved" events were sent to another app,
> and the mouse pointer is now outside the document area, the CSS path
> field hasn't changed.
>
> sherm--


Sherm, you are a genius! There is no doubt about it. This is a
nice bit of knowledge indeed. Thank you.

You can say anything at all to me from now on and nothing will
ever take you off the special list I keep that excludes folk from
my attempts at withering criticisms, carping childish accusations
and fantastic posings...

--
dorayme
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      07-14-2007
On 2007-07-13, 0dev <(E-Mail Removed)> wrote:
> I'm trying to fix a CSS problem in Safari on Mac.
>
> The following page displays fine on Firefox and IE on Windows and
> Linux:
> http://tinyurl.com/2w9nl3
>
> The page has the following errors on Safari/Mac:
> http://tinyurl.com/3yoj83
> http://tinyurl.com/3xsdc2
>
> The problem is in the footer section (marked in the code with
> comments).
>
> The CSS for that footer section is found at the bottom of this CSS
> file:
> http://tinyurl.com/32yk7p
>
> Why isn't it displaying correctly in Safari/Mac?


The footer is a table, whose width is set to 760px.

Inside its second row are three cells, with widths 316px, 225px, and one
with a div whose outer margin width is 215px. You've also got 15px of
padding on the first cell.

That lot adds up to 771px. So the browser asks itself, well which do you
want? 760px or 771px? Firefox picks 760px, Safari 771px. As it happens,
you wanted 760px so Safari guessed wrong on this occasion.

Easier to let the computer do what it's good at and add the numbers up
for you, so just delete "width=225" from the middle cell in that row. The
browser will give it whatever it can get away with to try to make the
whole thing 760px wide.
 
Reply With Quote
 
0dev
Guest
Posts: n/a
 
      07-16-2007
On Jul 13, 8:19 pm, "Jonathan N. Little" <(E-Mail Removed)>
wrote:
> 0dev wrote:
> > I didn't write the code except the footer links. I'm just trying to
> > get a footer that will display on Safari/Mac as well as FF and IE.

>
> Think about this for one moment, even though you did not write the other
> code, if it is so malformed what are the chances that something you
> *add* would display properly without repairing what precedes it?


I ran the page through two validators and most of the errors would not
affect layout, or they were errors with the validators. For example,
the W3C Validator says "end tag for element "HEAD" which is not
open." But if you look at the HEAD element it opens and closes
normally. Missing alt attributes and using "language" instead of
"type" for scripts shouldn't affect the layout. The ampersands in the
URLs shouldn't affect the layout.

Can Safari/Mac handle proprietary attributes like "TOPMARGIN"?

These are the main CSS rules for the footer:

/* For footer navigation */
..footer-box {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
background-color: #830d12;
}
..listhostels a:link, .listhostels a:visited {
text-decoration: none;
color: #fff;
}
..listhostels a:hover {
text-decoration: underline;
color: #fff;
}
..footer-box h1, .footer-box h2 {
margin-top: 0;
padding-top: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 0;
padding-bottom: 0;
color: #fff;
}
..listhostels {
font-size: 9px;
margin-top: 0;
padding-top: 0;
}

Is there anything in there that Mac Safari handles differently than IE/
FF that would cause the problem shown in the images linked to in the
original post?



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
question on Safari and css Pan HTML 17 08-15-2006 08:05 PM
problems with css on Safari bikepaws@googlemail.com HTML 1 03-18-2006 08:56 PM
CSS and Safari - Help Please jspsfo@gmail.com HTML 13 11-30-2005 10:21 PM
Forcing a css file with Safari Giuseppe Chielli HTML 9 05-10-2005 02:30 PM
CSS Safari Problem Nick Howes HTML 4 11-07-2003 04:37 PM



Advertisments