Hi all , Help! Hehe, I have been pulling my hair out a little bit too much with this one, and am now appealing to the community: This is the site: http://tinyurl.com/2tpr3v I have a menu, in ie it shows like this: #item 1 #item 2 #pretty simple But in firefox, it shows like this: Edit: it has a big margin to the left, doesn't show here. Here's my css: #menu a { text-decoration: none;} #menu a:hover { text-decoration: underline;} #menu ul { margin: 5px 0px; list-style:none; width: 160px; font-size: 12px; font-weight: bold; } #menu ul li { border-bottom: thin dotted #999; padding:5px; } #menu ul li:hover{ border-bottom: thin dotted #999; padding:5px; background-color:#EFEFEF;} #menu ul li.menu-current:hover{ border-bottom: thin dotted #999; padding:5px; background-color:#FFF;} #menu ul ul { list-style:none; font-size: 12px; font-weight: normal;} #menu ul ul li { list-style:none; text-indent:10px; background: url(images/list_bg3.gif) no-repeat 0px 5px; padding: 0px; border-bottom: 0px;} #menu ul ul li:hover{ list-style:none; text-indent:10px; background: url(images/list_bg3.gif) no-repeat 0px 5px; padding: 0px; border-bottom: 0px;} #menu ul ul li.menu-current:hover{ list-style:none; text-indent:10px; background: url(images/list_bg3.gif) no-repeat 0px 5px; padding: 0px; border-bottom: 0px;} Code (markup): How can I make it work across browsers? Here's the link again: http://tinyurl.com/2tpr3v Thanks so much
You should really use a universal reset instead of specifying margin and padding for each element. You're going to have lots of inconsistencies if you don't.
Applying a universal reset IMO can confuse beginners and it seems like an overkill here because there is only one problem area.
It could confuse them as in "wtf is this star thing?" But as they go further through their page, and they start testing on multiple browsers, they'll start seeing something looking okay in say FF and crappy in IE or other way around, and they'll try changing the padding and margins to fix it, only to see it screw with another browser. There are some good reasons not to use the universal selector, but it was a godsend for me when I was just starting out. Lists are the worst!
Well, his content area is very inconsistent (MSIE6 vs FF2) and the first step to solving that (if he even cares) would be a uni-reset or reset.css.
Good rule of thumb - if with proper indentation any section of your code is tabbed in more than eight times, you are probably doing something wrong. Good rule of thumb - if your HTML between <body></body> is more than three times the size of the actual text content, you are probably doing something wrong. Good rule of thumb - if you need to point up-tree for a file like .css or .js, or use an absolute link , you are probably doing something wrong. Good rule of thumb - if your table only has one column - don't use a table. If the table only has one row, you better be using it for visual effects a list can't do. Good rule of thumb - if you have any sort of navigation or presentational elements in flash, you are DEFINATELY doing something wrong. Hey, meaningless class names and nonsenscial spans/strong tags - is that a WYSIWYG I smell? My advice: chuck it and start over.
Very good sum-up, shadow. No necessary to start over though. Tables are good, as long as it maintains consistency across browsers as well as realizing your ideas easily and cheaply. Check out each and every page of Google, no doctypes, tables flying all around. Not everyone is a professional, so for the best, they are blessed to choose tables for an easy life and less time sitting in front of computers but more time hanging with friends. Cheers!
You're right, google is horribly written. But, it's a page with a few links and a search box. They can have as sh*tty a code as they want. It doesn't matter. I do feel sorry for anyong who has to fix or change anything at yahoo.com though. The code there is also quite bad; the main difference is that yahoo.com is HUGE. No sir, you couldn't pay me enough money to play in that bog. Semantics isn't just for semantics. It's for cleaner code, easier maintanance, accessibility to all, and less time working on the site after it's "done."
A universal selector IS necessary in every situation to do with a website. It's even more necessary for beginners. Btw Stomme, yahoo.com has very good coding as far as XHTML/CSS is concerned... They redid it not too long ago based off their own CSS framework that's really popular at the moment.
Yahoo's homepage code is far from great. Inline css / style elements all over the place, inconsistent code, inline js, divitus, etc. With all the coders they have I'd expect something better.
That has to be the MOST... Gah, I lack the words in proper company. As Auntie Em would say: "Being a christian woman, I just can't say it." The Yahoo 'framework' is some of the worst bloated crap I've ever seen, and as to the code they actually use on their own sites, it makes their framework look GOOD. Hell, it makes E-fence look good. One look at their bullshit '%/em = px' crap is proof enough of that. (which the way they set it up defeats the POINT of using %/em in the first place!) Let's review www.yahoo.com shall we? 65K of inlined Javascript and CSS, most of that javascript being functions - that should ALL be in external files so it's at least cached across multiple pages. an additional 40 odd k of javascript that bloats out the page for ZERO return, on a page that only has 3k of text content. 14K of inlined javascript AFTER the BODY tag is closed, THEN another k or so AFTER the HTML tag. /FAIL/ HARD. Script tags that are invalid for the doctype (there is no language property in strict), use of deprecated (and annoying) attributes like target, Properly written that page uncompressed should be smaller than their current version COMPRESSED. 122k JUST for the main .html file with a crappy 2 objects, 20 odd images (that could probably be reduced to 12-14 images)? MAJOR /FAIL/ That it's all fixed size fonts below accessability minimums needing to be zoomed in 25% or more by 'large font/120 dpi' users, stuck in a crappy fixed-width 1024 layout - /FAIL/FAIL/FAIL/ at intarweb. (they pretty much HAVE to use %/em since IE users would HAVE to resize the text to useful sizes) 266 validation errors ring a bell? There's a difference between enhancing a site via ajax, and letting some DHTML script kiddie let his raging chodo for javascript get the better of him.