Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Why does Safari keep messing this up?
- Thread starter AlBDamned
- Start date
- Sort by reaction score
Yeah it's definitely to do with the width. I'm just keen to know why it's handled differently in the two browsers.
Impossible to know without seeing HTML. It's like diagnosing someones car problem over the phone.
Ok here you go (url blanked out). it's pretty crude I know, but I've built my site on Typepad/Movable Type so this is workaround to having a nav bar.
I'd personally do this with CSS rather than nbsp and images for border lines.
Non-breaking spaces can be accomplished using CSS with the whitespace property (e.g., #wrapper p { whitespace: nowrap; }). Then use paddings and margins on each item and borders on each item for the vertical lines, and then a border for the whole section for the horizontal lines above and below.
Non-breaking spaces can be accomplished using CSS with the whitespace property (e.g., #wrapper p { whitespace: nowrap; }). Then use paddings and margins on each item and borders on each item for the vertical lines, and then a border for the whole section for the horizontal lines above and below.
I'd love to do that but it's way beyond my skills unfortunately
Not a problem, here's one way. Adjust as need be. You may be more comfortable using border widths in px rather than em. It's just my way. Let me know if you need anything explained or deciphered.
HTML:
HTML:
<ul id="navbar">
<li class="first"><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
<li><a href="#">Linkage</a></li>
</ul>
HTML:
#navbar {
margin: .3em 0; padding: .5em 0;
font-family: sans-serif;
white-space: nowrap;
border-top: .12em solid #aaa;
border-bottom: .12em solid #aaa;
}
#navbar li {
display: inline;
margin: 0; padding: 0 2em;
border-right: .12em solid #000;
}
#navbar li.first {
border-left: .12em solid #000;
}
#navbar li a {
color: #00a; font-weight: bold;
text-decoration: none;
}Nice Work
Thanks, I figured I should back up my words so threw it together. Actually came out simpler than I thought.
Wow, thank you. I think I can see whereabouts to replace the html. Where in the CSS would I put the new CSS code? At the moment it doesn't have a "navbar" reference?
Also, I'm using "|" as separators. Will this have those or do i need to add them some how?
Thanks again for taking time to do that, really wasn't expecting such a response in this thread.
Wow, thank you. I think I can see whereabouts to replace the html. Where in the CSS would I put the new CSS code? At the moment it doesn't have a "navbar" reference?
Also, I'm using "|" as separators. Will this have those or do i need to add them some how?
Thanks again for taking time to do that, really wasn't expecting such a response in this thread.
The CSS here can be dropped anywhere in your CSS file really. The selectors are specific enough that they shouldn't conflict with any others.
The "|" is being accomplished as a border on the li tags. I'm attaching (hopefully) a partial snapshot of what the code accomplishes.
How could you expect less from MacRumors?
Attachments
The CSS here can be dropped anywhere in your CSS file really. The selectors are specific enough that they shouldn't conflict with any others.
The "|" is being accomplished as a border on the li tags. I'm attaching (hopefully) a partial snapshot of what the code accomplishes.
How could you expect less from MacRumors?
Genius. I'll try it and let you know how things go
Edit: Ok something's not quite right. The below is what I have now.
Also, am I doing the links right? This is an example of how I filled in the lines:
<ul id="navbar">
<li><a href="#http://www.mywebsite.com>">Home</a></li>
Attachments
Genius. I'll try it and let you know how things go
Edit: Ok something's not quite right. The below is what I have now.
Also, am I doing the links right? This is an example of how I filled in the lines:
<ul id="navbar">
<li><a href="#http://www.mywebsite.com>">Home</a></li>
Close, the pound (#) needs to go because that's only used for links on the current page. Also there was an extra > toward the end. Here's what it should look like.
HTML:
<li><a href="http://www.mywebsite.com">Home</a></li>That may have been enough to throw off the CSS so lets see if fixing the links resolves the problem.
Ok I'm up to here now. I'd put the CSS in the wrong template (duh).
Currently the bottom border is thick, and the RSS logo and underlying link are not showing for some reason. These tweaks aside it looks much better, though. Much better!
Edit: uploaded the right picture and corrected the links in the html...
Currently the bottom border is thick, and the RSS logo and underlying link are not showing for some reason. These tweaks aside it looks much better, though. Much better!
Edit: uploaded the right picture and corrected the links in the html...
Attachments
Yeah on border thickness I eluded to that when I first gave the code. Most people use px rather than em. In the CSS where it defines border, change the .12em portions with 1px and you'll get a thinner line.
Not completely sure on the logo issue you mention, and what you mean by "underlying link." The section for that should be something like,
HTML:
<li><a href="http://www.mywebsite.com/feed"><img src="rss.png" alt="RSS Feed" /></a></li>
For the left border make sure the first link has the class 'first'
HTML:
<li class="first">....</li>A big thanks to Angelwatt for this. I think it's just about right. There's still a slight difference in alignment between firefox and safari, but I think this is about as good as it will get (firefox render is perfect).
The RSS logo wasn't displaying, but I re-wrote the link/code in the browser and it worked second time around. Also tweaked some of the padding to 2.33 to even it out. Looks good, and much less crude underneath.
The RSS logo wasn't displaying, but I re-wrote the link/code in the browser and it worked second time around. Also tweaked some of the padding to 2.33 to even it out. Looks good, and much less crude underneath.
