SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
-
Nov 17, 2007, 06:14 #1
- Join Date
- Sep 2001
- Location
- Vancouver
- Posts
- 370
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two CSS Questions: Top of Page IE vs FF
I am getting closed to finished on a somewhat complex CSS design.
http://landexcorp.com/clients/TwoRags/comps/green2.html
Issue #1:
I am using a JS Component called Nifty Corners, it works pretty good! In the two Right Widgets I have an issue with IE. It displays correctly in Firefox.
I think it has something to do with me defining the height and Nifty Corners not liking that. It also wraps the last button to the next line (but works fine in FF).
Issue #2
I am trying to align the elements in the top login bar. IE allows me to use margin-top: parameter. In FF it does nothing! Any ideas? I am not married to using a UL there but I've tried a couple options.
Other Issue
If the Content is longer in Column 1 (C1), it does not continue the Container element. I think I can simply at to the bg color to the shadow bg image to get around this. But if there is a code way to do it let me know??
This is one of the more complex CSS sites I have done, so any other critiques would be appreciated. Always happy to learn!
Thanks in advance.
Steve
-
Nov 17, 2007, 10:36 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
If the Content is longer in Column 1 (C1), it does not continue the Container element.
Code:<li class="odd">8</li> </ul> </div> </div> <div style="clear:both;height:1px;overflow:hidden"></div> </div> </div> </body> </html>
Read the faq on floats for more clearing techniques.
-
Nov 17, 2007, 10:59 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
There is the 3 pixel jog on the last button so change the html to this:
Code:<div class="Menu"> <div class="ItemSel">featured</div> <div class="Item">recent</div> <div class="Item" style="padding-top: 4px;"> most viewed</div> <div class="Item" style="float: left;margin-right:0; padding-top: 4px;">most commented</div> </div>
You also need to remove this from the html as for some strange reason it is causes IE problems but its not needed anyway.
Code:#Main .RightWidget .Menu .Item, .ItemSel { background: #671B00; float: left; margin-right: 3px; color: #FFFFFF; height: 30px; text-align: center; /*vertical-align: bottom; remove*/ width: 75px; line-height: 90%; padding-top: 10px; }
-
Nov 17, 2007, 11:06 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
For the top navigation do this instead.
Code:#Header #Navigation { clear:both; margin:0 0 0 30px; position:relative; top:10px; }
-
Nov 17, 2007, 15:24 #5
- Join Date
- Sep 2001
- Location
- Vancouver
- Posts
- 370
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks so much Paul! I have made our suggested changes. Any idea on the top Black bar???
Also, fixing the top Navigation causes an issue in IE now.
Thanks!!
-
Nov 17, 2007, 19:05 #6
You have 48 html errors. Most are 'alt' errors but others will cause you problems sooner or later.
-
Nov 17, 2007, 19:33 #7
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As drhowarddrfine has said, there are many errors, including block level elements (divs) within inline elements (a) in the menu - surprised Paul hadn't picked that up.
The problem with the rounded corners in IE6 is due to IE6 not allowing elements to be smaller than what is required for the current font size - whilst the nifty corners css sets a 1px font size for the inner <b> elements, the outer <b> is causing the problem with small corners. Setting a font size and giving HasLayout to the outer <b> fixes that :
Code:b.niftycorners, b.niftyfill {display: block; font-size: 1px; zoom: 1;}
-
Nov 18, 2007, 05:17 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by LiveTronix
Originally Posted by centauri
Code:b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px; overflow:hidden;border-style:solid;border-width: 0 1px}
Originally Posted by Centauri
It's not the cause of the problem but of course should be corrected into valid html.
-
Nov 18, 2007, 05:28 #9
-
Nov 18, 2007, 05:52 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Centauri
Because all the internal elements are caught it is not needed on the outer.
Check it for yourself with a small demo.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style> .test{background:red;border:1px solid #000} b{display:block;height:1px;overflow:hidden} </style> </head> <body> <div class="test"><b></b></div> </body> </html>
-
Nov 18, 2007, 06:26 #11
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Interesting - stupid IE. It seems to expand the div unless there is content ???!!
Anyway, I am trying to understand this problem - is this related to the vertical-align:bottom you advised to remove earlier? I try removing this dynamically using the Web Accessibity Toolbar and absolutely nothing happens - maybe this is a problem with the toolbar? I could not see the purpose of that css rule, but I could not see any difference when I removed it earlier ....
Do you vary styles etc live or download the lot to work on them ?
Cheers
Graeme
-
Nov 18, 2007, 06:56 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
All Good questions Graeme I can see your brain working now
Originally Posted by centauri
It's a bit weird because you can set an empty element and then it doesn't expand the height either!
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style> .test{background:red;border:1px solid #000;height:1px;} </style> </head> <body> <div class="test"><p></p></div> </body> </html>
It shows you can never be sure of anything with IE.(see the odd double margin bug in this thread post#17)
is this related to the vertical-align:bottom y
I need to do some tests and see If I can duplicate the problem in a simpler situation to see what's going on. I only found the problem by a process of elimination and deleting things until the problem was cured.
Do you vary styles etc live or download the lot to work on them ?
The was I test is to view source and copy the html locally. Grab the css files using the web developer toolbar and insert them into the head of the html. Then I do a search and replace through the whole document and change the relative addresses into absolute addresses so I can see all the images. It only takes a couple of minutes to do (unless there are hundreds of css files of course.)
I find this is the quickest way to debug because you can then keep cutting the html in half and narrow the problem down until you can isolate it.
-
Nov 18, 2007, 07:16 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by graeme
b.niftycorners,b.niftyfill{display:block;zoom:1.0}
-
Nov 18, 2007, 10:06 #14
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, Paul - very interesting. Doing some experimenting, I have just found out that when using the Web Accessibility Toolbar for IE, removing a style rule from the css edit panel does not remove it from the live document - it seems that the styles are overlaid on the original styles such that only alterations to values or additional style rules have any effect, unlike the Web Developer Toolbar for FF. Looks like I will also have to download the entire site more often if I am chasing an IE6 bug - oh well, learn something new.....
-
Nov 18, 2007, 10:29 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
removing a style rule from the css edit panel does not remove it from the live document - it seems that the styles are overlaid on the original styles such that only alterations to values or additional style rules have any effect,
-
Nov 18, 2007, 19:56 #16
- Join Date
- Sep 2001
- Location
- Vancouver
- Posts
- 370
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for all the help. The code is now 100% valid, not major issues, but nice to do.
Still having some issues with the top black bar and the form. Any ideas?
-
Nov 18, 2007, 20:14 #17
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:#LoginBar ul { float: right } #LoginBar ul li { display: inline; padding-right: 5px; vertical-align: top; float: left; }
-
Nov 19, 2007, 00:57 #18
- Join Date
- Sep 2001
- Location
- Vancouver
- Posts
- 370
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Centauri - that worked...
Think I'm in good shape with this site now. Appreciate all the help SitePointers!
Bookmarks