SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
-
Oct 22, 2006, 04:34 #1
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Firefox doesn't seem to like background image in the A element
Hi guys, long time no post!!!!
Thanks to Paul O'Brian's column layouts (cheers Paul) I've finally scrapped tables and switched to using css to control everything.
Anyways, I'm creating a site for a friend, nothing fancy, just something that she can showcase her hand-made stationary on. You can see a bare-bones version of it here (no content or anything, just the basic layout: http://www.postfive.com/mandy
Everything's fine in both IE and Firefox with the exception of the rollovers (oh and Firefox doesn't want to colour the HR's but I'm not worried about that for the moment).
I will admit, it's a pretty weird combination of DIVs that I've used to place the menu, but this is all new to me and if I find something that works I go with it!!
There's a 'navigation' div which is essentially a borderless box which I've used to set the margin from the header and to the left so it matches the position of the Customer Comments box on the right.
Within that box there are a series of 'menu' divs (one for each button) which is the same height and width as the button with bottom margin to space them out.
Then, within each of the 'menu' divs is the link. The CSS looks like this:
Code:A.menu:LINK {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_out.gif); background-repeat : no-repeat; } A.menu:VISITED {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_out.gif); background-repeat : no-repeat; } A.menu:HOVER {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_over.gif); background-repeat : no-repeat; } A.menu:ACTIVE {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_over.gif); background-repeat : no-repeat; }
If you look at the site in Firefox at the moment, the menu simply displays the rollover image, achieved by adding this:
Code:html>body #menu{padding-top:5px;padding-left:3px; background-image:url(images/button_over.gif); background-repeat:no-repeat;}
It's not the best solution, but it'll do for now until I can find a way to get Firefox to show the button images in the links.
I've tried searching here and on the web in general but haven't been able to find anything. Can anybody help me with this?
Oh, and please excuse the pinkness of the site. It's Mandy's favourite colour!Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 22, 2006, 06:00 #2
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for that, but you've lost me totally.
Any chance you can you explain in a little more detail? I don't really want to take this code and use it, not understanding why it works.
I'm a pain, I know. Sorry.Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 22, 2006, 06:29 #3
What he's saying is this: A.menu:LINK A ? .menu class is improper syntax. Also, you can only use an id name once per page but you use it more than once. That is why you can't get it to work right.
-
Oct 23, 2006, 01:32 #4
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys. I understand a bit better now. Didn't realise you could only use a particular DIV once per page. Told you I was new to this!!!!!!
I'll go change my style sheet now and html now and give this a go. Fortunately I used an 'include' for the menu so I only have to change one text file!Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 02:45 #5
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yay! It works. There were a few little bits that needed tweaking though.
The left margin was way too big, so I set a negative left-hand margin to the 'navigation li' div which did the trick for IE, but the margin in Firefox was much bigger and the top margin was bigger too so the top of the top button wasn't level with the comments box on the right. Also Firefox didn't seem to like the 100% width and wasn't showing the whole of the button. Adding this line sorted most of it out, but the top button still isn't lined up properly:
Code:html>body #navigation li{min-width:111px;margin-top:0px;margin-bottom:10px;margin-left:-30px;}
Thanks for the help.Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 03:12 #6
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I already have the margin and padding set to 0 in the body. Is that not the same?
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 03:22 #7
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh right. Ok, thanks.
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 03:33 #8
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmmm. Done that and it's fine (though I had to add a left margin value), only now I have another problem in FireFox. The HR's are now aligned to the left instead of centred.
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 03:51 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Saz,
To center block level elements in good browsers you need to use margin:auto on a fixed width element.
Code:HR { background:#a81c9a; color : #A81C9A; width : 75%; margin:auto; border:none; }
With your partial doctype you will be working in quirks mode in ie which means that the box model hacks in the code will be wrong. You need to use a full doctype and code in standards mode and then just cater for ie5 and 5.5. with the box model hacks (if you are worried about them). In this way ie6 uses the correct box model and doesn't need any hacks.
Full doctype:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
Oct 23, 2006, 03:57 #10
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul. That DOCTYPE thing is new to me. I've just been going with what EditPlus includes by default. Probably doesn't help that I'm using a well old version of the program!!!!
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 04:09 #11
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have FF version 1.5.0.7 and the site's ok in that. The font is a bit smaller and the border around the comments box thinner, but for me they're acceptable differences. Can you tell me what's out in IE7 and OP as I don't have them on my system.
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 04:42 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You have a horizontal scrollbar in ie7 because you have made your #comments element wider than the parent #right.
You also need ot remove the 100% height from #outer as that will break firefox.
Code:#outer{ min-height:100%;/*for mozilla as IE treats height as min-height anyway*/ /*height:100%;*/ margin-left:126px; margin-right:170px; margin-bottom:-52px; color: #000000; } * html #outer{height:100%;margin-left:123px;margin-right:167px;}/* ie 3 pixel jog*/ #comments{ float:right; width:150px; height:225px; border:2px solid #DFA3D9; padding:3px 3px 3px 3px; margin-top:10px; margin-right:5px; margin-left:5px; }
-
Oct 23, 2006, 05:37 #13
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ahhh, I see what I've done I think. I have the comments box set to 150px with a left margin of 10px and a right margin of 5px. That's well within the 170px of the right div. But then I have the border and the 3px padding each side. I take it that all adds to the overall width?
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
-
Oct 23, 2006, 05:42 #14
Originally Posted by Saz
-
Oct 23, 2006, 05:43 #15
- Join Date
- Mar 2001
- Location
- Kent, United Kingdom
- Posts
- 5,275
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Done. Now it looks sweet. Thanks guys.
Saz: Naturally Blonde, Naturally Dizzy!
No longer Editor of the Community Crier.
Don't mind me, I'm having a BLONDE moment!
Bookmarks