SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: width differences in IE/FF
-
Aug 9, 2006, 13:59 #1
- Join Date
- Nov 2001
- Location
- The Central Plains
- Posts
- 3,304
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
width differences in IE/FF
here's the page: http://www.billbolte.com/test/template.html
style sheet: http://www.billbolte.com/test/assets...s/style_01.css
on the nav buttons on the left, i would like them to fit 100% across the width of the left column. I can get it to work in either FF or IE but not both at the same time. what's the trick?
-
Aug 10, 2006, 06:23 #2
- Join Date
- Nov 2001
- Location
- The Central Plains
- Posts
- 3,304
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
can someone at least point me in the right direction? i still haven't figured this out...
-
Aug 10, 2006, 15:18 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Sorry I missed your post.
Change the width in the nav lists and anchors to 130px and remove the margin left 1px from nav ul.
Code:#nav, #nav ul{ padding: 0 0 0 0; margin: 5px 0 10px 0; font-size: 12px; list-style: none; /*float: left;* position:relative; } #nav li{ height: 25px; /*border-left: 1px solid Black;*/ border-top: 1px solid Black; /*border-right: 1px solid Black;*/ line-height: 22px; padding: 0 0 0 0; width: 130px; height: 25px; position:relative; }
Then remove the ie style as shown below as its not really necessary.
Code:* html #outer{/* remove this styleblock*/ margin-left:127px; margin-right:127px; }
and then change left to be -2px as below.
Code:#left { position:relative;/*ie needs this to show float */ width:130px; float:left; margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */ left:-2px }
-
Aug 10, 2006, 19:33 #4
- Join Date
- Nov 2001
- Location
- The Central Plains
- Posts
- 3,304
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks paul i'll give it a try...
-
Aug 10, 2006, 20:28 #5
- Join Date
- Mar 2006
- Posts
- 291
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul I took a look at this layout and when I modified the css with your changes the result for me was that the <p> </p> that sits below the left side navigaton pushes up underneathe that navigation and does not hold its position within FF.
-
Aug 11, 2006, 03:50 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Originally Posted by keithc
This is the code with the changes i mentioned above.
http://www.pmob.co.uk/temp/bbolte.htm
Where is it coming unstuck?
-
Aug 11, 2006, 08:00 #7
- Join Date
- Mar 2006
- Posts
- 291
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey Paul,
Maybe I copied something in wrong or I dont have all the style sheets for the page but this is what I get if I copy the css and the source code off that page along with the changes you noted. In FF it should show that paragraph slide up underneathe the left side navigation links.
http://ww2.tektown.net:92/NiceLayout.php
-
Aug 11, 2006, 08:36 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Yes you've missed some stuff out here.
Code:#nav, #nav ul{ padding: 0 0 0 0; margin: 5px 0 10px 0; font-size: 12px; list-style: none; /*float: left;* position:relative; } } #nav li{ height: 25px; /*border-left: 1px solid Black;*/ border-top: 1px solid Black; /*border-right: 1px solid Black;*/ line-height: 22px; padding: 0 0 0 0; width: 130px; height: 25px; position:relative; }
Code:#nav, #nav ul{ padding: 0 0 0 0; margin: 5px 0 10px 0; font-size: 12px; list-style: none; /*float: left;*/ position:relative; } /* just one bracket will do */ #nav li{ height: 25px; /*border-left: 1px solid Black;*/ border-top: 1px solid Black; /*border-right: 1px solid Black;*/ line-height: 22px; padding: 0 0 0 0; width: 130px; height: 25px; position:relative; }
-
Aug 11, 2006, 08:48 #9
- Join Date
- Mar 2006
- Posts
- 291
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks Paul
Bookmarks