dbrimlow
-
Posts
712 -
Joined
-
Last visited
Never
Everything posted by dbrimlow
-
Before even looking at your main issue, first let me recommend you drop the jscript browser sniffers and use an IE conditional comment instead. a Conditional comment is a great way to make IE behave. And it validates. You first create your regular css that all real browsers use. Then, you create another css that modifies ONLY those elements needed to make IE behave. For the most part, standard css in your main css file will be fine in IE 6 and 7. It is just those few major width, height, positioning, etc elements that IE gets all willy-nilly with. So conceivably your ie-only.css file would just have a few lines. Example from one of my sites: My main css styles my navigation setting for all browsers as follows: #navigation ul{ margin: 0; padding: 0; float: left; line-height: 1.5em; list-style-type: none; } #navigation li{ float: left; } #navigation a:link, #navigation a:visited{ float: left; display: block; color: #000000; background-color:#E4BD6A; margin:0 0.25em; padding: 5px 8px; margin-top: -6px; border-bottom-width: 0; border-top:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-left:1px solid #FFFFFF } #navigation a:hover, #navigation a:active{ color: #243360; background-color: #FFFFFF; border-top:1px solid #E4BD6A; border-right:1px solid #E4BD6A; border-left:1px solid #E4BD6A } Most of the commands work just fine in IE6/7 except for a few, so my ie-only.css modifies only those parts that are needed to make IE behave: #navigation ul{ line-height: 1.2em; } #navigation a { position: relative; } Here is how the conditional comment is used in a head tag (the "if lt ie 7" means to apply the css to all versions of IE from 7 and previous): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>blah blah</title> <meta http-equiv="content-language" content="en-us" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="master.css" /> <!--[if lt ie 7]> <link rel="stylesheet" type="text/css" media="screen,projection" href="ie-only.css" /> <![endif]--> </head> Now, another thing, fix your css a tags. They will cause trouble as written. a { font-weight: bold; font-size: 12px; font-family: arial; text-decoration: none; } a:visited { color: #0099ff; } a:link, a:active { color: #0000ff; } a:hover { font-size: 14px; color: #8080ff; } ALWAYS! use the "LVHA" or "LoVe HAte" order: a:link, a:visited then a:hover, a:active This is a RULE! It will save you hours of debugging later when you can't figure out why your link colors are behaving strangely and not hovering. Dave
-
FilmGod, you are getting caught up in the trap most newbies and non-pros who "make" websites always do. You are building a house based on nothing but how it will look and with no regard for engineering plans or blueprints. "Why use a poured concrete foundation? The ground looks solid enough to me". "Look, just slap some plywood on the ground so we can lay down those nice tiles". "We don't need any columns or beams, the blue siding and roof can be stapled right to the studs ... it looks fine, doesn't it?" "listing? It doesn't look like it's listing from here within the Microsoft construction trailer. Frankly, I think it looks great ... put the for sale sign on the lawn". See what I mean? A website requires a proper structural foundation. Without it, it may look fine (particularly if you are looking through those Microsoft rose colored windows that hide all the flaws) but it IS going to collapse sooner or later. A website has two things: 1. code and structure, 2. style - how it looks. One has nothing to do with the other. We can create an unlimited number of awesome looking diverse websites all using one the same, simple, perfectly coded markup document "blueprint". I mean, consider that for a moment. If you create a perfectly structured text-only html file, with absolutely NO intention of putting any style on it whatsoever ... any of us can take that perfect file and with css create thousands upon thousands of completely unique, stunning, magnificent web sites - because the perfect document follows the rules, the css can be infinitely changed and crafted with confidence that it will always "look" as intended. If the markup document, however, has no proper structure, but "looked" good as one intended it to, testing it only in, say, IE6.0. That file does not follow any known rules. It will not follow easily do as instructed by a css command ... it will need to be "adjusted" for, and that is when you turn css from a science into an "art" that requires trial and error, time, finesse and talent to make a simple thing look good. Dave
-
You are having a "cascading" issue. You are designating the tag level elements "li" and "ul" incorrectly. There is no element "li:hover". The only way to make it work is to use the a tags: Try: #headerMenu ul ul a:link, ul ul a:visited { display: none; } #headerMenu ul ul a:hover, ul ul a:active { display: block; }
-
LOL!! Neither! You should NEVER leave text hanging out there bareassed and exposed to the world. Text should always be contained within a block level element of some kind ... (paragraph, list, heading). The thing most people forget is that a web page was initially intended to convey a text document properly structured like within a word-processor. A PROPERLY structured web page is almost exactly like a word document - it should have headings (h1 - h6) Paragraphs, bullets, etc. Styling how it actually looks is SECONDARY. The problem with 99% of the web pages generated since 1998 is that they were crafted based on how they LOOK first and what they convey last. Luckily, CSS came along to attempt refocusing web coders back to correct markup structure. And it is still taking a long time for people to "get it". To answer your question, however, what is "better", so long as the structure is properly adhered to, is LESS. Use the fewest elements to perform the same task: So, this: <div class="bold"> <span class="red">Hello I am Text</span> </div> is better as this: <div class="style1> <p>Hello I am Text</p> </div> With the css having styled it as: .style 1 { color:"red" font-weight:bold } And you CAN use multiple classes (it is what they were created for) in any browser: <div class="style1> <p class="style22">Hello I am Text</p> </div> Is just fine. Try to avoid "Divitus". The point is to keep your markup clean and lean - making the styles sheet do all the work.
-
Without seeing your whole code in context (but judging by what I DO see) it looks to me like this is 100% quirks mode, non-valid code that "MAY" only ever work as intended in IE. A real browser would choke on the "<div id="bv_"..." being used three times. NEVER use a named ID more than once on a page. HTML Pros should have spotted that immediately. You also are not setting the overflow and/or visibility elements. You designate the image once, yet use three different absolute positioned elements. This code is a mess which means anything goes. Browsers TRY to guess what you intend when you use non-valid code. Show us the whole page (change your links and urls to generic junk if you are nervous). But without seeing the entire context, it is impossible to debug. This is a very simple CSS layout solution that is being used within markup. Any CSS Pro could slap this together easily. But not from a page snippet that suggests the entire page may be flawed.
-
A good rule of thumb to get used to is deciding how to ALWAYS use IDs and classes in the first place. IDs should be used to set up those major one time, blank layout structural elements on the page: main container, heading, navbar, columns (left/right nav, content) and footer. Use Classes for styling the pages "content" - so it can be used repeatedly on the page.
-
TM is right. People have to start getting used to coding for the 21st Century. You can do the same thing using classes for the images within multiple paragraphs instead of lists (or any block level container) - one class floats left and one floats right. Example (from one of my sites showing images of guitars - note image widths vary greatly, but it still aligns as intended; it works even better with equal sized images): <div id="content"> <p class="imagebox"> <img src="hag/head.jpg" alt="head stock" width="210" height="300" class="left" /> <img src="hag/perspective-a.jpg" alt="perspective a" width="225" height="300" class="right" /> </p> <p class="imagebox"> <img src="hag/body.jpg" alt="body" width="209" height="300" class="left" /> <img src="hag/perspective-b.jpg" alt="perspective b" width="225" height="300" class="right" /> </p> <p class="imagebox"> <img src="hag/full2.jpg" alt="full b" width="121" height="300" class="left" /> <img src="hag/kingsneck.jpg" alt="kings neck" width="300" height="184" class="left" /> <img src="hag/full1a.jpg" alt="full 1a" width="117" height="300" class="right" /> <img src="hag/serialnum.jpg" alt="serial number" width="200" height="146" class="right" /> </p> <p class="imagebox"> <img src="hag/backfull.jpg" alt="back full view" width="500" height="179" /> </p> </div> Here is the css: p.imagebox { margin: 0 auto; padding: 5px 5px; border: 1px solid #c9c9c9; background-color: #000000; text-align:center; } .left{ float: left; padding-left: 10px} .right{float:right;padding-left: 10px}
-
[SOLVED] Hovering over these links works in FF not IE 6
dbrimlow replied to rxbanditboy1112's topic in CSS Help
Once again LoVe HAte saves the day! -
[SOLVED] Hovering over these links works in FF not IE 6
dbrimlow replied to rxbanditboy1112's topic in CSS Help
You need to put the four link states in proper order. It is ALWAYS: a:link, a:visited a:hover, a:active li a:link, li a:visited { display:block; text-decoration:none; color: #C0AEA0; float:left; position:relative; line-height:20px; } li a:hover, a:active { float:left; position:relative; background-color:#EADED2; line-height:20px; } They only work when in order ("link, visited, hover, active" - "LVHA" - "LoVe HAte") -
If you really want to deal with IE 5.0 and 5.5, here is the authority on how to hack IE: http://www.positioniseverything.net/explorer.html I, too, have finally stopped worrying about IE 5.5 - even though I see a few people who still use it in my stats. If we all stop wasting our time trying to make old IE work, then these people will finally get a clue and upgrade to either 6.0 or a real browser like FF.
-
This is an old trick. It uses floats and negative margin to properly align the pipe. First, designate a container for the nav with a 1em bottom margin and hidden overflow. As you have done, do not specifically style "ul" - you will use the <ul id="">tag. Then style the li to use a negative left margin and 1.1 line height (because you designated the 1em bottom margin): #topnavwrap { margin-bottom: 1em; overflow: hidden; width: 90%; } #topnav { list-style-type: none; font-size:0.9em; margin:0 auto; padding:12px 20px 0 0; text-align:right; font-family:Verdana, Arial, Sans-Serif; } #topnav li { border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; } #topnav li a:link, #topnav li a:visited { text-decoration:none; color:#BBC4A3; } #topnav li a:hover, #topnav li a:active { color:#F7F3ED; } Here is the whole page to see it in action: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body {background-color:#0099CC} #topnavwrap { margin-bottom: 1em; overflow: hidden; width: 90%; } #topnav { list-style-type: none; font-size:0.9em; margin:0 auto; padding:12px 20px 0 0; text-align:right; font-family:Verdana, Arial, Sans-Serif; } #topnav li { border-left: 1px solid #000; float: left; line-height: 1.1em; margin: 0 .5em 0 -.5em; padding: 0 .5em 0 .5em; } #topnav li a:link, #topnav li a:visited { text-decoration:none; color:#BBC4A3; } #topnav li a:hover, #topnav li a:active { color:#F7F3ED; } --> </style> </head> <body> <div id="#topnavwrap"> <ul id="topnav"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </body> </html> Works every time. Dave
-
TM, I don't know if that is the the issue. This is very strange. In essence he has a main wrapper then three non-floated 100% width elements, then an un wrapped break tag, followed by a floated left and floated right element. Like this: <div id="wrapper"> <div id="head1">bunch of test @ 200px height</div> <div id="head2">bunch of test @ 200px height</div> <div id="head3">bunch of test @ 200px height</div> <br /> <div id="leftfloat">bunch of test @ 500px height</div> <div id="rightfloat">bunch of test @ 500px height</div> <div id="footer">bunch of test @ 200px height</div> <div> When viewed in IE 6.0, the left and right floats disappear - it's as if it were this: <div id="wrapper"> <div id="head1">bunch of test @ 200px height</div> <div id="head2">bunch of test @ 200px height</div> <div id="head3">bunch of test @ 200px height</div> <div id="footer">bunch of test @ 200px height</div> <div> BUT, when you remove the errant <br /> tag, it all views fine in IE 6.0. What I think happens, is that the break tag is relative to the main wrapper div. So it forces IE to see the 2 floats as absolute positioned and hidden - which brings them to the top left - relative of the wrapper div. Almost as if he had written the mark-up like this: <div id="wrapper"> <br /> <div id="leftfloat" style="position:absolute; visibility:hidden">bunch of test @ 500px height</div> <div id="rightfloat" style="visibility:hidden">bunch of test @ 500px height</div> <div id="head1" style="position:absolute; visibility:hidden">bunch of test @ 200px height</div> <div id="head2">bunch of test @ 200px height</div> <div id="head3">bunch of test @ 200px height</div> <div id="footer" >bunch of test @ 200px height</div> </div>
-
Here is how I do it: " </a> |</li>" <li><a href="home.html">home </a> |</li> You have two choices: Edit the actual wp_list_pages to end all <li> tags with " </a> |</li>" or create a preg to force it. Dave
-
All the pros here should look at this one! IE has always been strange when it comes to floats. In essence, you had three non-floated top divs containers followed by a stand alone left floated and stand alone right floated div container (aka 2 column) that was followed by a non-floated footer. The top 3 containers and the footer were showing ... the floated containers were not. Why? Because the page's catch-all container "maincontainer" was acting as a block level tag once you put the break outside of any other holding container. That then made the floated items somehow (and this could ONLY ever happen in IE, LOL) behave like position:relative items and the non-floated items behave like "position:absolute". And THAT made the floated containers slide up and behind the non-floated three containers. This is one of the strangest thing I ever saw. Now, if you want that extra line break, you can place it within the last paragraph just before the closing </p> tag. The floats will still work fine because the break is contained properly. Incidentally, you are going to have trouble in the future with this: "a:link, a:active, a:hover, a:visited" The order is wrong. The correct order (RULE!) is: a:link, a:visited, a:hover, a:active (AKA - LVHA - "LoVe HAte") Dave
-
LOL!!! After cursing and scratching my head with it for 10 minutes or so, I noticed an errant <br /> tag just flappin' in the breeze. Remove the <br /> tag before the <div id="leftSide">. I have to say, I was totally stumped. There was no reason within your CSS for this to happen ... NONE! So it had to be in the markup.
-
All links must be in the proper order or they will not work properly. The order is: a:link, a:visited then a:hover, a:active
-
Andy, we should sticky post LVHA. More people get this one rule wrong than almost all others (except DOCTYPE). Dave
-
To further expand upon what Andy suggested, you should ALWAYS have text contained within a block level tag - paragraph, header, list, etc. Never just leave text flappin' in the breeze with only a div or span. If you put your text in a p tag, then create a style for an image within the p tag - something along the lines: p img {float:left; margin:.25em} This way, you can put the image within the p tag itself. The same goes for a list item. For example, here is a list item with a photo floated left in one of my sites: <li> <a href="http://www.manhattanlofts.com" target="_blank"><strong>manhattanlofts.com</strong><em>Residential Lofts in NYC </em><img src="images/manlofts.png" alt="Image" height="123" width="150">An Advanced Business site with dynamic database, advanced custom coding, client interface data mgmnt screens, Art Director. W3C valid web code. </a> <hr> </li> The css for the img tag is: #sidecol img { float: left; margin: 5px 10px 5px 5px; padding: 3px; border: 1px solid #28AAB9; }
-
Glad to help. Please note the use of a proper DOCTYPE. Also, when messing with link tags in css, you should ALWAYS cover your butt by listing the four states right off the bat. And they MUST always be in the proper order (or they will do very strange things) which is: a:link, a:visited {} then a:hover; a:active{} For the rest of your css whenever modifying a particular a tag within a class or ID if you don't modify them all, then those not modified will fall back to the initial tag default. And if you leave out visited? MAN will you have issues with hovers and link styling in IE. Good luck. Dave
-
Funny, after reading this post, I checked my main site's urchin stats under platforms sure enough, out of the 130,000 or so visits, 10 were from various handhelds.
-
You don't need to have the topnav links include the ul and li tag. The a tags alone will control the effects. Although, after all this, I realize you have a typo in your code. You had "height 25px", it should have been height:25px". Would this perhaps be more what you are looking for? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> #topnav{ width: 760px; font-weight: bold; height: 25px; padding-top: 2px; padding-bottom: 2px; margin-bottom: 10px; } #topnav ul{ border: 1px solid #BBB; background-color: #0000CC; padding: 4px 0; margin: 0 auto; } #topnav li{ display: inline; padding: 4px 8px 4px 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; border-right: 1px solid #DADADA; } #topnav a:link, #topnav a:visited{ color: #FFFFFF; text-decoration: none; } #topnav a:hover, #topnav a:active{ background-color: #FFFFFF; color: #003366; } </style> </head> <body> <div id="topnav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="">Browse</a></li> <li><a href="search.php">Search</a></li> <li><a href="">Forum</a></li> <li><a href="blog.php">Blog</a></li> <li><a href="login.php">Login</a></li> <li><a href="register_form.php">Register</a></li> </ul> </div> </body> </html>
-
Well, for one, this is designed for IE (there is no scrollbar styling in valid css code - it is MS proprietary only). But you also have a typo: #topbar { background: #000060; color: #FFFF99; width: inherit; margin: 1px; position: relative; text-aligne: center; should be "text-align: center;"
-
This worked fine when I try it in both FF and IE 6.