positioning issues with safari
newbie
Location: Bath, UK
Posted: Wed, 2008-07-23 10:25
Hi
I am having a number of positioning isues with Safari on PC and Mac. The html and css is valid (though the CMS I'm using and cannot edit has some code which falls foul of the validator) and I've read myriad articles on Haslayout and the holly hack, position is everything etc to no avail. Doc type is good and the site renders fine on Firefox on Mac and PC, IE6 and 7 and Opera.
1. If you view the page http://www.bathstudent.com/freshers2008/events/ in Safari, the hyperlinks "wristband", "timetable" and "induction" don't sit squarely in their boxes which are background images - they sit fine in the other browsers but I've had to change the units from ems to pixels to get IE to play ball.
2. Again, when viewed in Safari, a white line appears under the tabs on the rhs of the page and there is some mis-alignment around the events splat. It lloks fine in the other browsers.
The html for the page is
<div id="wrapper">
<div id="main-container"><!--includes the entire page beneath the masterpage header-->
<div id="headerCont"><!--needs to expand to the size of the viewport and contains the 2nd global nav-->
<div id="logo-top"><!--the top bit of the splodge--> <img height="55" width="263" alt="" src="/pageassets/freshers2008/events/header2Splodge_lower.gif" /></div>
<!--end of logo-top-->
<div id="global-nav"><!--includes the global nav in an unordered list-->
<ul>
<li><a href="/freshers2008"><img height="55" width="76" alt="home" src="/pageassets/freshers2008/events/home_inactive.jpg" /></a></li>
<li><img height="55" width="74" alt="events" src="/pageassets/freshers2008/events/events_active.jpg" /></li>
<li><a href="/freshers2008/todo"><img height="55" width="76" alt="todo" src="/pageassets/freshers2008/new_todo.jpg" /></a></li>
<li><a href="/freshers2008/advice"><img height="55" width="75" alt="advice" src="/pageassets/freshers2008/gnav_advice.jpg" /></a></li>
<li><a href="/freshers2008/whereis"><img height="55" width="94" alt="where is" src="/pageassets/freshers2008/gnav_whereis1.jpg" /></a></li>
<li><a href="/freshers2008/aboutus"><img height="55" width="85" alt="about us" src="/pageassets/freshers2008/gnav_aboutus.jpg" /></a></li>
<li><a href="/freshers2008/help"><img height="55" width="65" alt="help" src="/pageassets/freshers2008/gnav_help.jpg" /></a></li>
</ul>
</div>
</div>
<!--end of headerCont-->
<div id="main-content"><!--encases the three columns and contains the surfer background image -->
<div id="col1"><!-- col1 begins-->
<div id="logo-main"><!-- logo-main begins--> <img width="329" alt="Freshers' Week Logo" src="/pageassets/freshers2008/events/events_logo_lower.jpg" /></div>
<!--end of logo-main-->
<div id="crowdBg"><!-- crowdBg begins-->
<div id="linkCont"><!-- linkCont begins--> <a class="wri" href="#">wristband</a> <a class="tim" href="#">timetable</a> <a class="ind" href="#">induction</a></div>
<!--end of linkCont--></div>
<!--end of crowdBg-->
<div id="footerBg"><!--footerBg begins--> <img height="134" width="201" alt="" src="/pageassets/freshers2008/events/events_image_bg.jpg" /></div>
<!--end of footerBg-->
<div id="footerText"><!--footerText begins-->
<h1>see what's going on >></h1>
</div>
<!--end of footerText--></div>
<!--end of col1-->
<div id="col2"><!-- col2 begins-->
<h3>Events</h3>
<div id="intro"><!--intro begins-->
<p>Suspendisse mollis. Morbi eget turpis. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<!--end of intro-->
<div id="para1"><!-- para1 begins-->
<div id="img1"><!--img1 begins--> <a href="#"><img height="94" width="124" alt="" src="/pageassets/freshers2008/events/wristband.jpg" /></a></div>
<!--end of img1-->
<div id="text1"><!-- text1 begins-->
<p>Nam mollis pede cursus lorem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vitae turpis. Mauris auctor pede. <a href="#">Curabitur risus</a>.Pellentesque sit amet odio quis ante rutrum consectetuer. Sed nunc nibh.</p>
</div>
<!--end of text1--></div>
<!--end of para1-->
<div id="para2"><!-- para2 begins-->
<div id="text2"><!-- text2 begins-->
<p>Nam mollis pede cursus lorem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vitae turpis. Mauris auctor pede.<a href="#">Curabitur risus</a>.Pellentesque sit amet odio quis ante rutrum consectetuer. Sed nunc</p>
</div>
<!--end of text2-->
<div id="img2"><!--img2 begins--> <a href="#"><img height="94" width="124" alt="" src="/pageassets/freshers2008/events/timetable.jpg" /></a></div>
<!--end of img2--></div>
<!--end of para2-->
<div id="para3"><!-- para3 begins-->
<div id="img3"><!--img3 begins--> <a href="#"><img height="94" width="124" alt="" src="/pageassets/freshers2008/events/induction.jpg" /></a></div>
<!--end of img3-->
<div id="text3"><!-- text3 begins-->
<p>Nam mollis pede cursus lorem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vitae turpis. Mauris auctor pede. <a href="#">Curabitur risus</a>.Pellentesque sit amet odio quis ante rutrum consectetuer. Sed nunc.</p>
</div>
<!--end of text3--></div>
<!--end of para3-->
<table>
<tbody>
<tr>
<td><a href="#">Sat 20th</a></td>
<td><a href="#">Sun 21st</a></td>
<td><a href="#">Mon 22nd</a></td>
<td><a href="#">Tue 23rd</a></td>
<td><a href="#">Wed 24th</a></td>
<td><a href="#">Thu 25th</a></td>
</tr>
<tr>
<td><a href="#">Fri 25th</a></td>
<td><a href="#">Sat 26th</a></td>
<td><a href="#">Sun 27th</a></td>
<td><a href="#">Mon 28th</a></td>
<td><a href="#">Tue 29th</a></td>
</tr>
</tbody>
</table>
<div id="footerFresh">
<div id="linklevel1">
<ul>
<li class="toplevel"><a href="#">EVENTS</a></li>
<li><a href="#">wristband</a></li>
<li><a href="#">timetable</a></li>
<li><a href="#">induction</a></li>
</ul>
</div>
<div id="linklevel2">
<ul>
<li class="toplevel"><a href="#">TO DO</a></li>
<li><a href="#">before arrival</a></li>
<li><a href="#">arrival</a></li>
<li><a href="#">checklist</a></li>
</ul>
</div>
<div id="linklevel3">
<ul>
<li class="toplevel"><a href="#">ADVICE</a></li>
<li><a href="#">student support</a></li>
<li><a href="#">international students</a></li>
<li><a href="#">RESNET/BUCS</a></li>
</ul>
</div>
<div id="linklevel4">
<ul>
<li class="toplevel"><a href="#">WHERE IS..?</a></li>
<li><a href="#">maps</a></li>
<li><a href="#">city</a></li>
<li><a href="#">campus</a></li>
</ul>
</div>
</div>
<!--end of footerFresh--></div>
<!-- col2 ends--></div>
<!--end of main-content--></div>
<!--end of main-container--></div>
<!--end of wrapper-->
...and I've emboldened the code that's causing the problems.
Here is the CSS. I've emboldened the code that repeats the slice background image and the problem hyperlinks.
body {font-family: verdana, geneva, arial, sans-serif !important;
}
#main-container {margin:auto;
width:1010px;
height:782px;
}
#wrapper {background-image: url(http://www.bathstudent.com/pageassets/freshers2008/events/slice_bg.jpg);
background-repeat:repeat-x;
height:782px;
}
#headerCont {background-color:#ffffff;
width:100%;
float:left;
display:inline;
margin:0em !important;
padding:0em !important;
}
#logo-top {margin:0em;
padding:0em;
text-align:left !important;
margin-left:2.7em;
margin-top:1.3em;
float:left;
display:inline;
}
#global-nav { float:left;
margin-bottom:0em;
padding:0em;
margin-top:1.3em;
margin-left:9.6em;
display:inline;
}
#global-nav ul li, img {margin:0em;
padding:0em;
float:left;
display:inline;
}
#global-nav ul {display:inline;
list-style-type:none;
}
#main-content {height:100%;
background-repeat:repeat-x;
float:left;
}
#col1 {width:460px;
height:100%;
float:left;
}
#logo-main, #crowdBg, #footerBg {margin-left:0em;
float:left;
display:inline;
}
#crowdBg {background-image: url(http://www.bathstudent.com/pageassets/freshers2008/events/events_local_nav.jpg);
background-repeat:no-repeat;
width:412px;
height:249px;
}
#linkCont {width:410px;
height:240px}
#linkCont a {color:#ffffff;
float:left;
font-size:130%;
margin:0em;}
#crowdBg a.wri {margin-top:42px;
margin-left:66px;
float:left;}
#crowdBg a.tim {margin-top:28px;
margin-left:103px;
clear:left;}
#crowdBg a.ind {margin-left:63px;
margin-top:18px !important;
clear:left;}
#footerText h1 {color:#ffffff;
font-size:250%;
float:left;
display:inline;
}
#col2 h2 {color:#ffffff;
font-size:151%;
margin-top:1em;
margin-bottom:1.5em;
float:left;
display:inline;
margin-left:0em !important;}
#footerBg {float:left;
margin-left:13.2em !important;
}
#col2 {height:705px;
width:540px;
float:left;
display:inline;
margin-left:0em !important;
}
#col2 p, h2, h3, h4 {font-weight:550;
font-family: verdana, geneva, arial, sans-serif !important;
font-size:105%;
color:#947D3D}
#col2 p {font-family: verdana, geneva, arial, sans-serif !important;
font-size:80%;
}
#col2 h3 {margin-top:1.2em;
margin-bottom:0.5em;
font-size:125%;}
#col2 a, #linklevel1 a, #linklevel2 a, #linklevel3 a, #linklevel4 a {text-decoration:none;
}
a {text-decoration:none !important;}
a:link {color:#4F4F7F;}
a:visited {color:#000000;}
a:hover {color:#909090;}
#footerFresh {
width:545px;
height:100px;
float:left;
margin-top:1.5em;
}
#linklevel1, #linklevel2, #linklevel3, #linklevel4 {float:left;}
#linklevel2, #linklevel3, #linklevel4 {margin-left:1.5em;}
.toplevel {margin-bottom:0.5em}
h4 {font-size:80%;
font-weight:bold;
margin-top:1.1em;}
a.links h4 {margin-top:0.5em;}
#footerFresh a {color:white;}
#para1, #para2, #para3, #intro {
margin-bottom:1em;
float:left;
width:520px;}
#text1, #text2, #text3 {float:left;
width:350px;
}
#text1, #text3 {margin-left:1em;}
#img1, #img2, #img3 {float:left;}
#img2 {margin-left:1em;}
table, tr, td {border:2px solid gray;
text-align:center;
}
table {float:left;
margin-top:2.5em;}
td {width:85px;
height:30px;
background-color:#ffffff;
font-size:120%;}
I've just joined CSS creator and am very grateful that such forums exist. Thank you to anybody who has the time to take a look at this.
with best wishes
James
Enthusiast
Posts: 326
Joined: 2008-02-04
Location: Netherlands
http://stommepoes.nl/bathstud
Posted: Wed, 2008-07-23 10:56
http://stommepoes.nl/bathstudentscreen.gif
That's FF 1.5 on a Linux machine. Are you sure Safari is the only one giving you trouble? Is your Safari on a Mac or Windows *edit n'm you said both)?
I break your site with a single text-enlarge (if FF). Making the text somewhat smaller moves the three splat links on the left even further out of their boxes, and alignment dies everywhere. Stuff like this happens to me all the time when I see sites-- for instance, someone will have verdana set as their first font, and then maybe sans-serif. I don't have verdana, so my browser uses the default sans-serif unix font-- and as verdana is a "larger" size for its font (strange, fonts in print are named by their sizes, so it's a bit difficult to talk about them being "bigger at the same size" for web), the larger font size seen by the designer is NOT seen by me (or anyone without verdana). As an example.
I dunno how much influence your CMS has on your HTML... can you change your left links to be like,
splatter image sitting in the background
but the links themselves being styled with the boxes? And Timetable simply being pushed further from the side with a margin? If the boxes with borders are sizes in ems, and the text (there is surely a way to use em's with IE... I do it all the time, so something else is up if you were forced to px), then the text would never come out of its boxes, ever.
Making my text size smaller also shows a growing gap between the right splatter menu and the khaki main box. I suspect Safari's text size is making your white line. Safari, like Mozilla, can enlarge text at will, regardless of the unit you use-- although Safari calculates the amounts a bit differently than Mozilla. Could explain why you see your site fine on your machine with your FF.
Yup, just checked with Safari-for-Win... if I increase the text size (also breaks the page), the white line vanishes.
I dunno, how much do you want to rewrite? You can't set what font everyone visiting your page will have, or what dpi, or which browser-- so you'd need to write a more flexible page. Or, you can leave it being a bit off in Safari, as your page is still functional in that browser, and I doubt anyone who only uses Safari will notice the white line-- it's thin enough to look like a design feature. The links on the left look the same as on FF on my Linux machine. Off-centered. That you may want to bother rewriting.
*took another look at that left linkie thing... because of the shadow effect you have, I'd instead go ahead and stick the text in that image as well, and use image replacement to set pieces of the image over your links using a span... this makes sure that your links still appear when images are off, and for screen readers, etc. But this way you can ensure pixel-perfect that the text looks good. It won't enlarge when people need it to, except in browsers that zoom, but if you make the font large enough it should mostly be okay (and what you have looks big enough for average viewers). After all you've already made your right-hand splat menu un-enlargable.
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 3
Joined: 2008-07-23
Location: Bath, UK
Hey Thanks for going to the
Posted: Wed, 2008-07-23 11:27
Hey
Thanks for going to the trouble of getting back to me. The problem with the white line under the rhs navigation is an isue in Safari on Mac and PC. The crooked left link text is also a problem in Firefox on Mac. At the moment, I'm not supporting Linux machines.
My pages hold together fine with text increase or decrease in FF but I see the problems in Safari. As you say, its probably an issue with how Safari renders font sizes and perhaps I'll just have to live with it. When I increase the length of the background slice by a pixel or two, it looks fine in Safari but off in all the others...
I may well go with your suggestion of putting the link text in the image and using the spans as you suggest.
Thanks very much for your time.
James
Enthusiast
Posts: 326
Joined: 2008-02-04
Location: Netherlands
Quote:My pages hold together
Posted: Thu, 2008-07-24 07:13
At work I get this on the Windows machine as well. Only Opera holds together, as it cannot enlarge text.
Good luck. It really doesn't look bad on Safari on my Windows machine at normal text size.
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 3
Joined: 2008-07-23
Location: Bath, UK
I've been using FF3. I've
Posted: Thu, 2008-07-24 08:30
I've been using FF3. I've just reinstalled FF2 and yes, the site breaks very easily. In the coding of a site, how do you avoid it breaking like this? Can you recommend any sites or books I should take a look at?
thanks a lot
James
Enthusiast
Posts: 326
Joined: 2008-02-04
Location: Netherlands
Hmmm... There's an old List
Posted: Mon, 2008-07-28 14:15
Hmmm... There's an old List Apart article about flex-width and liquid layouts, which should mention flexible containers (which is usually the only way your text can grow without breaking the containers)...
http://www.alistapart.com/articles/elastic/
There are a bunch others that came up when I googled, but many of them have one problem, this MYTH:
Seeings how everyone doesn't have the same dpi, and you can't guarentee that while when someone downloaded the browser it was 16px default, that they didn't change it to something that worked better for them... so that's rubbish (even if it would work for a lot of machines).
Avoid that, or any comments about setting the body's font size to the very tiny 62.5%, and you'll be good when you go through the articles. I googled "elastic liquid design css" specifically looking for the A List Apart article.
Since you are using images for the top menu, I'd set a definite px width on that part, not em. Set widths in px on things that rely on images to set the size and don't have any content inside that can grow (like by setting overflow: hidden on something with a set height and width). I'd have to look at your site again to see who it is exactly that's knocking the top menu out of alignment... likely something on the left side grows too big and the browser has to drop the imagemenu down to keep everything in the container...
You could take a look at a page I've made, but the CSS is quite a bit. You could try searching for form elements alone to see. The page also isn't very complex, though the forms are big, but everything's in ems: http://stommepoes.nl/Homeselling/secondhome/invoeren2.html increase and decrease your text size in any browser that does it (not ZOOM). CSS: http://stommepoes.nl/Homeselling/secondhome/default.css
You could also take a look at the main page (secondhome.html), where there's some more boxes, except that I'm using quite a few IE6 expressions (Javascript for IE6 in the CSS) to set min and max widths on various things. There's a non-JS way to do it but it requires extra containers (IE6 doesn't understand min and max width). This is called "flex-width" and is more restrained (and I think easier to set for 800x600 resolutions) than liquid widths. You could also see the page where I tried to fix a design dilemma with floats (beschikbaar.html). Here, the original, table-ridden page had the months sidebar on the left and the price table on the right, side-by-side. Since I was doing the redesign to stay happy for those with 800x600, this was not possible, there just wasn't enough room. I ended up changing their source order, and floating them in opposite directions-- at a large screen width like I have, the page looks like the original design, but when the window gets smaller (I think 1024 is actually still too small to get them to line up properly), the price tabel slides over the months, which was acceptable enough. It looks okay at small resolutions, and perfectly useable, but has a design compromise.
So sometimes it's good to know what you can do for Plan B if you can't get the design to behave (I think yours would be fine, though).
Sometimes it's good to hybrid: having something like a sidebar be fixed width, while the rest of the page is flex or liquid.
Took another look at your page... the image menu is called global-nav and it's floated left. If anything, I would have floated it right, since it's sitting on the right side of the headerCont box. If you turn images off, you can see that the increase in size of the text hidden behind the image is partially what's making them jump out of the page on text-enlarge.
When I'm making flexible pages, sometimes I have to make rigid boxes to keep the design, esp when images are used in the content like this. You need to float that menu to the right, and set its width (you have floated the menu but set no width... meaning the float lets the content determine its width, and as content grows with text-enlarge, so does the width of the menu! Thus the height of the headerCont). Set a width on the menu, and set overflow: hidden to stop the enlarging text from peaking out when it gets bigger than your menu's image.
Another trick with images and expandable designs is making the image bigger than what is normally seen, so that if the container grows, the background image still seems to fill it. This isn't always a good way, since larger-than-needed images are larger files to be loaded by the browser, but sometimes it's worth it.
I'm no expert, but I can fake one on teh Interwebz