SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: CSS effect issue
-
Aug 6, 2006, 15:25 #1
- Join Date
- Sep 2005
- Location
- Bristol, ENG
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS effect issue
Hi,
Ive got this little problem relating to this css effect I recently added to my site.
If you rollover the content on each of my 5 main links at the top of the page it highlights the text grey and a red line appears. Now this all looks fine in IE and each highlight (left and right) is the same height as each other.
If you view it in FF the homepage is fine. However others for example the portfolio page highlights down to the end of the separator line (which I want it to do) and on the right-hand side the highlight height varies when i want them to both be the same height.
Heres the XHTML:
Code:<div class="txtheaders1-Off" onmouseover="this.className='txtheaders1-On';" onmouseout="this.className='txtheaders1-Off';"> <p>I specialise in building clean, attractive websites that your customers will find a pleasure to use. <br /> <br /> Whether you want a simple web presence or large brochure site with Flash animation, I can produce a site to suit your needs.</p> </div> <div class="txtheaders2-Off" onmouseover="this.className='txtheaders2-On';" onmouseout="this.className='txtheaders2-Off';"> Please select an option from the portfolio frame below for more information and to view my recent projects.<br /> <br /> <br /> <br /> </div>
Code:.txtheaders1-Off { border:solid 0px black; padding: 5px 10px 3px 17px; border-right:solid 1px #eaeaea; width:290px; float:left; } .txtheaders1-On { background:#F5F5F5; border:solid 0px black; padding: 5px 10px 3px 17px; border-right:solid 1px #B82A2A; width:290px; float:left; } .txtheaders2-Off { border:solid 0px red; padding: 5px 0px 3px 10px; width:290px; float:right; } .txtheaders2-On { background:#F5F5F5; border:solid 0px red; padding: 5px 0px 3px 10px; width:290px; float:right; }
Anyone got a solution to this?
Thanks
-
Aug 6, 2006, 15:42 #2
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It seems to me your padding top on your anchors is too large. Dropping it back by 3px seems to fix it for FF. I would probably not bother with any padding at all and instead make the image the height that you actually want that area to be (ie add another 70+px to the top of the images.) Also, this:
Code:#nav a.last { border-top: 3px solid #fff; border-right:1px solid #fff; margin:0; padding: 75px 9px 0 7px; display:block; float:left; text-decoration:none; }
Code:#nav a.last { border-right:1px solid #fff;}
-
Aug 6, 2006, 15:57 #3
- Join Date
- Sep 2005
- Location
- Bristol, ENG
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What part of my CSS code do i need to drop back by 3px? Tried a couple of things but it didnt seem to work.
Thanks for pointing out the repeat on #nav a, now changed
-
Aug 6, 2006, 16:03 #4
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
#nav a has a top padding of 75px.
Bookmarks