Hi a have a css only drop down menu. I wanted to be the same size that the other elements of my site 1000px but it seems that IE stretches the menu bar by two inches of so, so in all other browser the menu is a little shorter. I tried specifying all elements with exact measurements(font space, style, ul, li , etc) so it can be seen the same in all but IE still reads it larger. Is there a fix for these that anyone knows Thank you.
Yeah, without seeing the site in question we really can't offer ANY meaningful advice.... THOUGH Just saying "1000px" means you've got a trashy fixed width layout, the antithesis of accessible design.... makes me wonder if you're using tables for layout too (another no-no) since tables don't inherit font-size from body or parent by default in IE. Also, expecting elements to remain the same size is also bad design, since you should be using dynamic fonts that auto-adjust to the users preferences. Your question, and the information you have given so far smells slightly of "How not to build a website" -- but again that's a wild guess without actually seeing it.
IE, since at least v.7 (I think v.6 too, but don't have it to test my memory), tables do inherit font size in standards mode. In quirks, not so much. cheers, gary
I've see it not, even when not in quirks -- but there's some other thing you set to trigger the behavior; forget what it is right now.
Well, if your remember, be sure to post it. I've never done more than ensure standards (consciously) to make sure IE tables inherit. cheers, gary
Hi, thank you for the reply's. Here is the site in question URl : carlosalbertocastellanos dot com/development/ . the link to the css is carlosalbertocastellanos dot com/development/css/main_menu.css .( it is kind of long code, if you want me to post it let me know) The menu is off just by two pixels in FF it does not align flush with the right margin. Should I leave it like that or is there q quick fix?....Thanks
Fixed width layout, giant freaking image rotator larger than most netbook displays, fixed metric fonts on EVERYTHING, illegible dropdowns thanks to the overuse of opacity... so the entire design needs to be pitched as inaccessible trash BEFORE even looking at the code. Under the hood, multiple stylesheets with only one (incomplete) media target, presentational IMG in the markup, nonsensical heading orders nonexistent semantics, tables for layout, endless pointless extra DIV for nothing, MASSIVE number of OPTION in a SELECT more likely to piss off users than make them want to use the site, empty DIV in the markup that appear to be scripting hooks (any script worth a damn would make those itself!), it's a laundry list of how not to build a website. Though the first line of code explains a lot -- Transitional... Which is to say in transition from 1997 to 1998 coding practices. [5](and no, slapping 5's lip service on it is NOT the answer)[/i]. I wouldn't even TRY to fix whatever problem it is you are having, because there's much bigger issues with the entire layout and design.
Thank you for your so kind answer my friend.........an "I dont know how to do it" would have being a shorter and better answer, i mean if you are not going to fix the problem....... I am pretty sure a person with your expertise would rather be developing website for high end customer rather than writing comments on a forum.(I am just saying would have save you time).....I think there is another section on the forum for website critics, next time I post something there I'll be sure to let you know. Here I am referring to the menu.But just to answer some your other concerns. We decided to use that image because is the trend in the industry. I can show you real estate website with bigger image sildes than mine develop by big design companies that charge above 10 000 for development(nothing to do with the menu). For the OPTION and SELECT, I would think a person with basic common sense would have come to the conclusion that this is a Miami Real estate site, and that probably some of the cities are not suppose to be there,( again that has nothing to do with the menu).....Now the menu. There is not a single table inside the Menu layer, i mean you had to go to other parts of the code to find a table. The illegible drop-down menu, I am sure a person not able to read it, is affecting how the main menu displays on IE. I can go on but i dont think this worth spending more time......so if you have something that could help me solve the problem I would really appreciated, otherwise, really dont waste my time and yours.
Thing is, the proper fix is to throw it out and start over. The site has too many fundemental flaws to be worrying about the menu. <mother> and if everyone else went running off a cliff... </mother> In other words nube predators who go after people who think they can get sound technical advice from the pages of Forbes -- which is akin to trying to get sound financial advice from the pages of Popular Electronics. They're called scam artists for a reason, no matter how much they charge or how ignorant people are willing to hand money over to them. Said scam artists REALLY seem to dominate the Realty industry -- flash over substance being the #1 thing, who cares if the sites are actually accessible or even useful to users. (see the average train wreck of ineptitude called a Multiple Listings System) Throw it out and start over -- that would help solve the problem as the layout itself in inherently flawed in concept and execution! If you want to talk JUST the menu... <div id="menu"> <ul id="menu"> Code (markup): ID's are unique, you can't use them more than once. UL is a perfectly good block level container, there is no reason to set a extra DIV around it. The half dozen separate stylesheets making the page load slow as molassas made it take a bit to find it, but the CSS isn't much better. #menu ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } Code (markup): Crappy fixed width means you're stuck using PX - but at least it's 14, the bare minimum -- apart from that this isn't too bad excepting the DIV around it for nothing. #menu ul li { display: block; position: relative; float: left; } Code (markup): LI are display:block by default, floats have display:block's behavior regardless of what you set display to, so there's no reason to say display:block on those. As a rule of thumb, trying to style LI, particularly on a single line menu is an exercise in futility. #menu ul li a { display: block; text-decoration: none; color: #ffffff; padding-top: 8px; padding-right: 15px; padding-bottom: 10px; padding-left: 16px; letter-spacing: .02em; white-space: nowrap; background-color: #006D97; } Defaulting the background-color here instead of on the wrapper is probably part of the problem. Also, there's something called 'condensed properties' that might help you out. #menu li ul { display: none; z-index:2000; z-index:2000; } Code (markup): z-index is inherited off the parent, setting it on the child when the parent isn't relative positioned or z-indexed means you likely will have depth sorting issues unless you get 'lucky'. .submneu_left{ width:auto; } .right{ position:absolute; left: 170px; } Code (markup): calling the latter just '.right' could lead to some issues, and really it probably shouldn't be APO. Doubling the width of the UL, making a single UL and then letting floats inside it auto-stack would likely be more reliable. #menu { height: 40px; border-right-width: thin; border-left-width: thin; border-right-style: none; border-left-style: none; border-right-color: #E9E9E9; border-left-color: #E9E9E9; padding: 0px; border-top-width: thin; border-top-style: none; border-top-color: #434F61; border-bottom-width: thin; border-bottom-style: none; border-bottom-color: #434F61; color: #FFF; width: 1000px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; border-top-right-radius: 10px; border-top-left-radius: 10px; } Code (markup): What was that I just said about condensed properties? and here's a hefty chunk of why splitting it into separate files is a pain in the arse. ... and for the life of me I still can't figure out where the devil the show/hide for the menu actually is, unless it's using javascript to do CSS' job... Other problems include not explicitly declaring a line-height when you change the font-size (which is why it's screwed up here in Opera at large fonts/120dpi, even more screwed up when I have to zoom thanks to the absurdly undersized illegible px metric fonts), incomplete font-family sets (ALWAYS include a default family like "Serif" or "sans-serif" as the last option in a stack), redeclaring the same values over and over for no fathomable reason, etc, etc... Even just the notion of a menu that's a perfect width with every element filling that width in total is broken methodology/thinking; should not be even attempted on a site! You came looking for a silver bullet fix, when you have deep rooted issues in your layout. Any 'magical' quicky fix you are given is just sweeping a much nastier problem under the rug! I would not advise ANYONE to deploy a website like that! REGARDLESS of if it's the norm in that industry, it's an inaccessible broken mess; that's why it's useless on mobile, useless on netbooks, gives me four different broken layouts in four different browsers on the desktop, and on the whole is a laundry list of how not to build a website. So excuse me for not suggesting the duct tape and bailing wire approach like a second rate Tim Taylor or Red Green. So remember, if women don't find you handsome, they should at least find you handy.
Ok, let's see. I have started from scratch.....I have created a new file, same URL +/development/menu.html. There u will find the new css. Have taken out the extra DIV..... I do not know what the heck you mean.....probably use em? Have taken out the display:block........ Change it to the wrapper..... took out the '.right'......dont understand the rest........ Suggest taking a chill pill.........and I have taken out the drop-down menu so you super ego does not take control over you. I have declared line-height.......again what alternative do you suggest instead of px, em?........completed family sets..... I think the mobile and net book issues can be solve with alternative css styles. And please let me know which browsers give you a broken layout, what operating system are you using.....I support the free-spirit thinking ..... What do you suggest.....I need the menu to be flush in both sides with bottom element, round corners and no empty space inside the menu on the sides. I am sure you can't do it! None of your suggestions have solve the original problem so far, which is why IE renders the text different in the menu.
Well that specifically is probably related to pissing all over accessibility with this particular bit on BODY in your CSS: body { ba margin: 0px; padding: 0px; font-family: Verdana, Geneva, sans-serif; font-size: 13px; Code (markup): The invalid "ba" by itself on a line isn't helping, but the real issue is the 13px on body, completely defeating the point of using EM's ANYWHERE else on the page -- since they will then no longer auto-enlarge and you might as well just say px everywhere else at that point. (since EVERYTHING inherit's from BODY) That combines with this: #menu ul li a { margin-left:0px; margin-right:0px; font-size: 1.215em; Code (markup): Mess, which comes to somewhere around 15.8 or so... given that browsers ALL have different behaviors for fractions of pixels (FF throws them away for render but not for flow, Opera and Webkit round off, IE rounds up always)... But that's part of what I mean, the layout is filled with non-viable concepts. Your 'silver bullet' fix is to change that to 15 or 16px in the menu, but again in most ways that menu is "not viable for web deployment" conceptually -- as the whole 'perfect width' thing is the type of garbage that has no business on any layout... no matter how much the artsy fartsy types say otherwise! Though that was near impossible to find without Dragonfly AND Firebug, thanks to things being spread out pointlessly over so many files with double the CSS that should be needed. If you REALLY have your heart set on it, and are using CSS3 anyways, to make the first and last button corners, try using "li:last-child a" and "li:first-child a". If I have the time later tonight after dinner, I'll take a stab at a quick rewrite of the main page of that to at least clean up the markup and make the layout behave -- though really the entire layout is useless broken rubbish from an accessibility standpoint. (that 44k of the 60k of markup is nothing but OPTION tags isn't helping make the page 'useful' either)