[css-d] Links with separator lines
I use #page_links and .footerbar for links. The problem shows on this page
http://www.entourage.mvps.org/
but
show OK on this page (and other pages on the site that use the same divs)
http://www.entourage.mvps.org/exchange/index.html
The Problem:
In Opera and FireFox on the Mac, I'm seeing two separator lines after the
first link.
IE 5.2 on the Mac shows the separator lines inside the link or way to one
side in both #page_links and #footer. There are other problems with IE Mac
that I'll address in a separate subject.
Safari Mac and OmniWeb Mac are OK for both page links and footer links.
On the PC side there is no problem with the separator lines for IE 6. I'm
seeing space after the first link Search A-Z Index. I'm guessing this is a
padding issue. I haven't been able to test in other PC browsers yet. Have
been downloading Opera and Firefox and the rate they are going it's going to
be hours just to download. Running VPC isn't what you would call swift.
My first thought was to check for some extraneous code but there is none
that I see. I don't understand why it works on other pages and not the home
page. I can see that IE Mac would be problematic but for other browser to
have a problem with just this one page is confusing.
CSS
---
#page_links {text-align: center;
margin-top: 1.5em;
}
.linksbar {
list-style-type: none;
padding:4px 0;
}
.linksbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.linksbar li.first {
border:none;
}
.footerbar {
list-style-type: none;
padding:4px 0;
}
.footerbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.footerbar li.first {
border:none;
---
HTML
---
div id=page_links
ul class=linksbar
li class=first
a href=faq/index.htmlSearch A-Z Index/a
li
li
a href=faq/top_faqs.htmlMost Asked Questions/a
/li
li
a href=faq/2004.htmlFAQs for Entourage 2004/a
/li
li
a href=faq_topic/sync_services_ical.htmlSync Services/a
/li
li
a href=new2mac.htmlnew2mac amp; Entourage/a
/li
li
a href=menumachine/topnav/navigation.htmlSite Map/a
/li
/ul
/div
---
div id=footer
ul class=footerbar
li class=first
a href=http://www.entourage.mvps.org/;Home/a
/li
li
a href=http://www.entourage.mvps.org/about.html;About/a
/li
li
a href=disclaimer.htmlDisclaimer/a
/li
/ul
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
Diane Ross wrote: I use #page_links and .footerbar for links. The problem shows on this page http://www.entourage.mvps.org/ but show OK on this page (and other pages on the site that use the same divs) http://www.entourage.mvps.org/exchange/index.html The Problem: In Opera and FireFox on the Mac, I'm seeing two separator lines after the first link. IE 5.2 on the Mac shows the separator lines inside the link or way to one side in both #page_links and #footer. There are other problems with IE Mac that I'll address in a separate subject. Safari Mac and OmniWeb Mac are OK for both page links and footer links. On the PC side there is no problem with the separator lines for IE 6. I'm seeing space after the first link Search A-Z Index. I'm guessing this is a padding issue. I haven't been able to test in other PC browsers yet. Have been downloading Opera and Firefox and the rate they are going it's going to be hours just to download. Running VPC isn't what you would call swift. My first thought was to check for some extraneous code but there is none that I see. I don't understand why it works on other pages and not the home page. I can see that IE Mac would be problematic but for other browser to have a problem with just this one page is confusing. Hi Diane, In FF2 under WinXP: I see the double separator lines at #page_links in the index page, in IE6 indeed an extra space instead. But ... you ordered it by typo on the home page. ;-) In the index page the html-validators (w3c and html-Tidy) are so friendly to tell us that the first li in the #page_links is closing with another li instead of a /li. The different error handling of browsers is giving different shows. The one browser is completing to the prescribed /li´s for XHTML, so adding an extra separator, the other browser is doing nothing but adding a space. [...] HTML --- div id=page_links ul class=linksbar li class=first a href=faq/index.htmlSearch A-Z Index/a li --- here he is! :-) li a href=faq/top_faqs.htmlMost Asked Questions/a /li [...] I don´t have an IE5/mac, so no idea why that is happening. Maybe you can hard code a separator `letter` | in the html instead of a border line in css, to avoid strange effects? Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
Diane Ross wrote: I looked at the code several time, but I just didn't see it. shaking my head at my stupidity I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links with separator lines
On 2/8/07 6:57 PM, francky [EMAIL PROTECTED] wrote: I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) Thanks for the reminder. I have become used to the GoLive bugs that are added (obviously they don't cover very much) and have not gotten into the habit of validating my code. Again, thanks for the help. -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
