/    Sign up×
Community /Pin to ProfileBookmark

Hacking Safari

Copy linkTweet thisAlerts:
Jul 26.2007

My relative positioning is not the same as other browsers, thus, the layout is jagged up in Safari.

I used <!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”hoscss_ie.css” />
<![endif]–> before to hack IE6 but found nothing for Safari. I basically want to tell the html file to pull a different css stylesheet when rendered in Safari. Please help, thanks

to post a comment
CSS

17 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 26.2007 — "conditionals" are only for IE. No such animal for non-IE. You could use a 'browser-sniffer javascript' to feed a different CSS file to specific user-agent browsers, -but I'd rather think this is a problem that could be corrected via altered code and have it work x-browser.

-Could you show us the code?
Copy linkTweet thisAlerts:
@wantteaauthorJul 26.2007 — Hi WebJoel

Haven't chatted for a while.

My styles are in my html file originally before I tried to hack. Please see:

http://www.fairmontdesigns.com


wanttea
Copy linkTweet thisAlerts:
@wantteaauthorJul 26.2007 — sorry forgot to specify:

the problem is the homepage

<td><br/><img style="position: relative; top: -3px;" src="images/index_bg_res.gif" />

<a id="divlinks" href="res_collections.html" style="position: relative; top: -56px; left: 99px;">collections</a>

<a id="divlinks" href="res_contact.html" style="position: relative; top: -33px; left: 37px;">contact us</a>

</td>

<td><br/><img style="position: relative; top: -3px;" src="images/index_bg_cab.gif" />

<a id="divlinks" href="cab_collections.html" style="position: relative; top: -56px; left: 36px;">collections</a>

<a id="divlinks" href="cab_contact.html" style="position: relative; top: -56px; left: 51px;">contact us</a>

<a id="divlinks" href="cab_faq.html" style="position: relative; top: -31px; left: 19px;">FAQ</a>

</td>

<td><br/><img style="position: relative; top: -3px;" src="images/index_bg_hos.gif" />

<a id="divlinks" href="hos_collections.html" style="position: relative; top: -56px; left: 46px;">elements</a>

<a id="divlinks" href="hos_portfolio.html" style="position: relative; top: -56px; left: 75px;">portfolio</a>

<a id="divlinks" href="hos_contact.html" style="position: relative; top: -31px; left: 16px;">contact us</a>

</td>
Copy linkTweet thisAlerts:
@WebJoelJul 26.2007 — Okay I've got your code & base, -will check this over later tonight/or tomorrow. ?
Copy linkTweet thisAlerts:
@wantteaauthorJul 26.2007 — Thanks WebJoel
Copy linkTweet thisAlerts:
@wantteaauthorJul 26.2007 — /* Background image */

body {

text-align:center;

background-color: #f7f7f5;

background-image: url("images/index_bg.gif");

background-repeat: repeat-x;

background-attachment: fixed;

font-family: Times New Roman, serif;

}

* {

margin:0; padding:0;

}

table#center {

margin: 0 auto;

padding: 5px;

}

/* top navigation */

.dotted_line_blk {

border-left: 1px dotted #606a74;

}

.dotted_line_wht {

border-left: 1px dotted #ffffff;

}

div#topmenu {

float:right;

position:relative; top:3px;

font-size: 13px;

vertical-align: bottom;

padding:2px;

}

div#topmenu ul{

list-style-type:none;

padding:0;

}

div#topmenu li {

padding:0 5px;

float:left;

}

div#topmenu a {

text-decoration:none; color:#ffffff

}

div#topmenu a:hover {

text-decoration:none; color:#000000

}

/* Middle Division images -Residential, Cabinetry and Hospitality */

.divbg {

background: url(images/index_bg_top.gif);

background-repeat: no-repeat;

}

/* Links for Residential, Cabinetry, hospitality */

a#divlinks {

font-size:13px;

text-decoration:none; color:#ffffff;

}

a#divlinks:hover {

text-decoration:none; color:#000000

}


/* background for bottom part */

div#divbg2 {

width: 683px;

height:133px;

background: url(images/index_bg_bottom.gif);

background-repeat:no-repeat;

}

/* Text description of company */

.index_intro_title {

font-weight: bold;

font-size: 14px;

font-style: italic;

}

div#index_intro {

float:left;

width: 370px;

color: #606a74;

text-align: justify;

font-size: 12px;

}


/* bottom navigation */

div#bottommenu {

float:right;

font-size:13px;

vertical-align: bottom;

padding:2px;

margin-top:-138px; margin-right:9px;

}

div#bottommenu ul{

list-style-type:none;

padding:0;

}

div#bottommenu li {

padding:0 5px;

float:left;

position:relative; top:37px;

}

div#bottommenu a {

text-decoration:none; color:#606a74;

}

div#bottommenu a:hover {

text-decoration:none; color:#000000

}
Copy linkTweet thisAlerts:
@wantteaauthorJul 27.2007 — I have found the codes that would point to the "customized safari" style sheet. Looks like the problem is still there. The relative positioning codes just don't work with safari. Not using relative positioning at all doesn't work either, since the links won't lay on top of the images either using z-index. ?
Copy linkTweet thisAlerts:
@WebJoelJul 27.2007 — Yes, 'Safari hacks' exist and ways to 'hide from other browsers' so that they do not correctly do the thing that would muss-up the layout in that browser. -Not the same thing as a 'conditional' I think. ? Maybe though(?)

I haven't seen what it happening to this yet... can you grab a screenshot?
Copy linkTweet thisAlerts:
@wantteaauthorJul 27.2007 — Sure. Please see attached. The links are all off

[upl-file uuid=e1547170-b5dc-4022-9af2-b5f2f2d7942c size=60kB]safariview.jpg[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelJul 27.2007 — Sure. Please see attached. The links are all off[/QUOTE]
Okay. That is sort-of what I see in other browsers. What is [I]supposed[/I] to happen, -you want the link-text to in 'inside' of those dotted-line boxes, perhaps? If so, -[I]this is going to be easy to fix[/I] (although it may involve some image-editing to remove the dotted-line parameters).

It looks to my suspicions that you are trying to 'position' the anchor text over the 'background image dotted-line boxes'?? If so, -this is unweildy at best, as your site is at the mercy of the user's default CSS-settings for font-sizes/family, which might override yours, and the results can be even worse than the image you showed. :p I'd make the bounding boxes a fixed size and center the text inside (or [I]text-align:left[/I] with [I]padding-left[/I], at least), and with generous space to allow for variant font-sizes or familys to not overflow the box.

(I didn't get to work on this at all today... [I]long story[/I] but no matter) -Will work on this tomorrow/over the weekend. When I get back from watching "The Simpsons" movie. ?
Copy linkTweet thisAlerts:
@WebJoelJul 28.2007 — I have found the codes that would point to the "customized safari" style sheet. Looks like the problem is still there. The relative positioning codes just don't work with safari. Not using relative positioning at all doesn't work either, since the links won't lay on top of the images either using z-index. ?[/QUOTE]

-It's not the relative positioning that is messing you up, -it is the way different browsers handle font-size, differently.

There is a X-browser 'cure' for this, but you have got some unusual layout happening here (like, using TABLEs for non-tabular data, and use of a <DIV> inside of a <UL> etc, which is invalid).

I am going to re-do this for you using non-TABLE markup. -It will make the code a LOT more compact, x-browser and easier to understand. ?

I have a pretty good start on it already (about half done with just 15-mins. into it. Should have it completed later tomorrow night or by Monday morn.).
Copy linkTweet thisAlerts:
@WebJoelJul 29.2007 — Jus' playin' around today. -Thought I whet your appetite with a screenshot of what I have so far (all non-TABLE).

The 'red' outlines the <li> and the 'blue' outlines the <ul>. The text (anchor) will fit inside.

I cropped a (approx) 5-pixel square piece of that gray-tiled background (also blue-outlined) that [I]was[/I] a 683-px wide by something-height image, -let the browser 'tile' this and save 5 or 6 seconds of download time right there.

The three main images I converted to *jpg (and see that we lost the transparent corner 'curved edges'... might paint these to match grid-background or convert into *png for single-channel transparency and KB-savings still better than *gif).

The *GIF versions were [I]huge[/I]. 30 or 40K each(?). The *jpg versions are less than half that size (and could be optimized even further, but I am just trying to workability).

[upl-file uuid=0c5680f4-2cb0-461d-b9df-319b05ebb5d6 size=56kB]ScreenHunter_1.jpg[/upl-file]
Copy linkTweet thisAlerts:
@tcaJul 30.2007 — I saw this on another forum: http://mikecherim.com/gbcms_xml/news_page.php?id=9

Although it is PHP it might be a real problem solver for some folks. I haven't tried it myself. Looks interesting though.

TC
Copy linkTweet thisAlerts:
@WebJoelJul 30.2007 — Using the images in the ZIP-folder and the external CSS files (included in the ZIP), here is a non-TABLE version of your site. Everything to run this site is included in this ZIP file.

Validates in TIDY and looks the same (acceptably, some very minor variation in font-sizes but this is dismissable really) in IE, Firefox and (ta-da!) [B]Safari[/B](onXP). In fact, -on Safari it looks *awesome*!!

And I added some uber-kewl css hover-effects to the links. ?



I have the list-items for the three 'sections' using one of four different available "classes" to draw a [I]dotted border[/I] on [I]two sides[/I] (one of either [U]bottom & right[/U], [U]left & bottom[/U], [U]top & right[/U] or [U]left & top[/U]... not all are used but [I]available[/I])



The 'border outlines' solves the problem of the text 'overflowing' it as per original complaint, as the text and the border are part of the same element (the <li>), and not that the text is being layered 'over top' of a background-image that employes 'dotted lines' (has no bearing upon spacial relationship to background-image).



It didn't take too long to create [I]this[/I] part of the page, but in whole I think I've spent a couple of hours playing around on this one. Had alot of fun though. ?



You will have to complete the absolute-path of the cited href's. I used the [I]relative-paths[/I] of your site just to populate the hyperlinks.



Code is yours to use however you wish. Questions?, -let me know.



[upl-file uuid=24142e47-d93b-4f7a-98b1-3807505b8f15 size=59kB]fairmontdesigns.zip[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelJul 30.2007 — I saw this on another forum: http://mikecherim.com/gbcms_xml/news_page.php?id=9

Although it is PHP it might be a real problem solver for some folks. I haven't tried it myself. Looks interesting though.

TC[/QUOTE] -Produces alot of divs and classes but a totally workable solution too! -Bookmark-worthy. -thanks!
Copy linkTweet thisAlerts:
@wantteaauthorAug 03.2007 — Hi WebJoel

Sorry didn't respond earlier. Just came back from vegas for work (it is true, for work, i don't gamble! :p )

How was the Simpson Movie? You liked?

I am going to look at the file tonight or tomorrow. But I like to thank you for your kindness


Your totally cool!
Copy linkTweet thisAlerts:
@WebJoelAug 05.2007 — Thanks.

Hope the file works for you.

Movie was excellent.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...