SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Oct 3, 2007, 04:52 #1
- Join Date
- Jun 2007
- Location
- Cape Town, South Africa
- Posts
- 281
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nav button showing differently in Browsers
I have set up some navigation buttons use CSS but when I check in the various browsers they display very differently and I can't fathom why. Everyone loves Firefox but for me it is a pain in this instance.
This is the CSS I have coded:
#leftside ul.topics {
list-style: none;
color: #ffffff;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
line-height: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#leftside ul.topics li {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: url(../images/nav_buttons_1.gif) no-repeat;
text-align: left;
display: block;
color: #FFFFFF;
text-decoration: none;
padding-left: 15px;
padding-top: 0px;
}
#leftside ul.topics li a:link {
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
margin-top: 5px;
}
#leftside ul.topics li a:visited {
color: #C0DCC0;
text-decoration: none;
}
#leftside ul.topics li a:active {
color: #000000;
text-decoration: none;
background: url(../images/nav_buttons_1_active.gif) no-repeat;
display: block;
}
#leftside ul.topics li a:hover {
font-size: 100%;
color: #FFFF00;
text-decoration: none;
}
I have attached pics of what I have. First is what it looks like in Dreamweaver, then in IE7, then Firefox, then Firefox with text enlarged and lastly Netscape.
-
Oct 3, 2007, 05:56 #2
- Join Date
- Dec 2002
- Location
- Aylmer, QC, Canada
- Posts
- 409
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Your attachments are pending approval so ... in the meantime ... could you provide a link so we can actually see what's going on?
-
Oct 3, 2007, 06:15 #3
- Join Date
- Jun 2007
- Location
- Cape Town, South Africa
- Posts
- 281
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sure - http://www.denvor.bartwebsites.com/
It is still very much in development but I am frustrated with the look of these buttons in Firefox and Netscape. Also shows correctly in Maxthon.
-
Oct 3, 2007, 06:21 #4
- Join Date
- Dec 2002
- Location
- Aylmer, QC, Canada
- Posts
- 409
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try adding a height: 36px; to #leftside ul.topics li
You'll have to play with padding to center your text vertically an adjust the height to compensate to that but ... that should get your bubble background to show up..
-
Oct 3, 2007, 06:28 #5
- Join Date
- Jun 2007
- Location
- Cape Town, South Africa
- Posts
- 281
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Great stuff - problem solved immediately.
You can see how green I am with CSS - but I love it. I really think it is the way to go and not table for websites.
I must admit for a "little" girl (your avatar) you are very good. You will be the world's best developer when you grow up
Thank you again for the prompt solution.
-
Oct 3, 2007, 06:34 #6
- Join Date
- Dec 2002
- Location
- Aylmer, QC, Canada
- Posts
- 409
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank for the compliment
Problems like this are very common when starting out with CSS ... I make them even now sometimes
-
Oct 3, 2007, 07:58 #7
- Join Date
- Sep 2007
- Location
- Wiltshire, UK.
- Posts
- 106
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In your <h4>Denvor has been writing songs since 1983</h4> the text doesn't drop a line as the screen reduces widthways making the first words impossible to read.
-
Oct 3, 2007, 08:07 #8
- Join Date
- Jun 2007
- Location
- Cape Town, South Africa
- Posts
- 281
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you very much SRD I was so focussed on the buttons that I never noticed it. I will now have to fugure out why and what to do to solve the problem.
Bookmarks