|
|
|||||||
| Notices |
| CSS Forum Cascading Style Sheets (CSS) and XHTML Forum |
 |
|
|
LinkBack (2) | Thread Tools | Display Modes |
30-01-2008, 03:04 AM
|
||||
|
||||
Here's a tricky one?
The basic layout of this web page is done. However, I am trying to make it a more fluid design, so if a potential user was to increase their text size the basic layout remains intact. So I removed the height attribute of 15px from the nav div. Now if a user increases their text size the nav menu does not jump out of it's container - I think that looks much better. Although in doing so it brings about a problem.
In Firefox, and viewing in a small screen resolution, the navigation :hover background does not fully fill it's space. For some reason (unknown to me) the nav div grows in height by one pixel on the bottom when the screen size is made smaller. Surprisingly IE7, 6, and 5 display it how I prefer, by completely filling it's nav menu container, (in other words, the nav div stays the same size regardless of screen size in IE7 6 and 5). Safari and Opera display it the same as firefox regardless of screen size. Now I can just give the nav div back it's height of 15px and this solves the problem, but like I said, I am trying to make a more fluid design. I have tried everything (for hours and hours) and have not been able to find a solution. Can someone please take a look and let me borrow some of your expertise? Thanks! Untitled Document           
|
|
30-01-2008, 03:21 AM
|
|||
|
|||
|
Two things... Add the following to '#nav li':
HTML Code:
list-style:none; line-height:1.2em; Last edited by KelliShaver; 30-01-2008 at 03:24 AM.
|
|
30-01-2008, 04:00 AM
|
||||
|
||||
|
Hi KelliShaver thanks for the reply. Unfortunately that solution did not work. When viewing in 800 by 600 screen size the nav div grows by one px only on the bottom - the top stays the same. So thats the delima. Did you see that this is a centered layout, both vertically and horizontally? That is might be the cause of this problem? Thanks
|
|
30-01-2008, 04:07 AM
|
|||
|
|||
|
Hnn, odd. That fixed it for me in FF at 800x600. In fact, I can't reproduce it all now. I can't see anything else that could be causing it. You could try specifying a height of the nav of 1.2em's as well and see if that does it. It should still scale.
|
|
30-01-2008, 12:36 PM
|
||||
|
||||
|
Ya it changes depending on how many tool bars you have etc. Try it moving the window size up and down and you will see what I mean. In another forum a user suggested this - it works in for fire fox perfect - others, not so much. Way over my head
Hi, You are always going to get rounding errors when using ems and percentages and its just a fact of life. You could add some padding to the bottom of the anchor and then set the z-index so it goes behind the nav borders. e.g. Code: #nav{position:relative;z-index:2} #nav li a { text-decoration: none; color: #000; padding: 0 1.6em 1px; position:relative; z-index:-1; } IE doesn't like this so you would have to put it back for ie. Code: <!--[if IE ]> <style type="text/css"> #nav li a {padding-bottom:0} </style> <![endif]--> </head> <body id="home"> Although if you are going to add a background color to the nav then the negative z-index won't work as Firefox will place the list behind the background and you won't see it.
|
|
31-01-2008, 12:41 AM
|
||||
|
||||
|
I new it - it was probably something simple and staring me right in the face. All I had to do was remove the line-height from the body tag and walla - looks perfect and the same across all the browsers now. I will just add back the line-height to the p, ol, and anything else I need it for. Your help was instrumental in helping me find the solution - Thank you very much. Yipeee!
|
|
|
|
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Picking a password is a tricky business | Toon | General Web Design Forum | 10 | 17-02-2007 01:58 PM |
| All times are GMT. The time now is 09:29 PM. |
Linear Mode
