dbrimlow
-
Posts
712 -
Joined
-
Last visited
Never
Everything posted by dbrimlow
-
Exactly why I want to see what else he has. Does he have floated elements before or after his header element (like a left side nav box AND a right side content box floated left with no container or clearing). Or absolutely positioned elements with block level header tags (I've had instances where IE includes the default header tags to the html flow as if it had been positioned relative instead). I've had occasion where just specifying text-align:right will cause IE to auto tack on a default right margin, and if he didn't specify img {border:none(or 0)} it will add a right margin. All of the bugs are "easily fixed", knowing which is being triggered is the key, though.
-
There are known issues - "double margin bug", "Box model bug", "HasLayout", "peek-a-boo bug" and many more, LOL, which is why we need to see the context to determine which of them are being triggered.
-
Without knowing in what context this div is placed (your full css and html) it is impossible to help. All elements positioned with css impact each other.
-
The link that lordfrikk posted is to the description and blog. A better link would be the actual online conversion tool he created Type Tester While his technique is great for blogs and limited content pages, it has potential danger for more involved pages where there are more than three levels of content (since any resize of a level changes the base relative size of the font from the body to the parent container ... 1em becomes relative to the container NOT the body). I am so far getting very comfortable using Dan Cederholm's technique of using "small" for the body font size (with x-small in my IEonly.css file).
-
You should. The whole reason to use non pixel fonts is to allow people to use their browser's text resize feature. So, try it yourself and test your layout. Use ems font-size in your current px layout, then in FF go to "view/text size/increase" Keep increasing until your layout blows up - if it doesn't then you don't need to revise your container dimensions. I recommend that you get a copy of Bulletproof Web Design by Dan Cederholm - $26.95 US no shipping from Amazon. It goes into relative font sizing at great detail.
-
As far as form elements are concerned, it is only the "style-able" form elements you need worry about - frameset, legands, lables, selects, etc. I set them to a base starting point that I am comfortable with - based on how I personally always use them, for example: fieldset {border: 1px solid #000; } legend {margin:0 0 0 5px; padding:0 0 0 5px; color: #000;} input, textarea, select {margin: 0; padding: 1px; font-size:1em; font-family: inherit;} select {font-family:inherit; font-size:1em; padding: 0}
-
You don't need to worry about which solution to use - you use them both. They are independant of each other (one targeting ONLY IE6 and below, while the other targets ONLY IE7). It is recommended (but not necessary) that you place them into an IE only css and call them in your head tag by using a conditional comment. Like this (which only targets any IE version including IE7): <head> <title>The horror of HasLayout</title> <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" href="ie-win.css" /><![endif]--> </head> contents of "ie-only.css" would then be: /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} They ARE hacks and they cleverly target the IE version necessary. The "hasLayout" solution for IE6 uses the "star" hack (* html) which is ignored by ALL browsers except IE6 and below (which also don't recognize min/max widths and height) - it is: * html #floated_div {height:1%} Since IE7, like modern browsers, ignores the "star" hack and DOES recognizes min/max - but still causes "HasLayout" - the solution for IE7 was extremely clever (using the "first-child" pseudo class to force IE7 to auto provide a min-height which subsequently forces it to accept the css element's dimensions): *:first-child + html #floated_div {min-height:1px} IE's "HasLayout" is very convoluted, but, in essence, it is that IE will automatically over-rule a css element's dimensions for containers or boxes that meet certain conditions that IE decides it needs to ignore - which cause layout problems including: * Many common IE float bugs. * Boxes themselves treating basic properties differently. * Margin collapsing between a container and its descendants. * Various problems with the construction of lists. * Differences in the positioning of background images. * Differences between browsers when using scripting. (for the brave and scholarly this link "explains" it all in "high-Geek language": onhavinglayout ... my eyes glaze over halfway through it no matter how many times I try)
-
Oh, come on! Don't be such a baby. LOL! How much trouble could it be?? Once you start using this technique, your floats will work in all browsers (including IE5.3 for mac!). Here is the original "clearfix" technique, it is worth bookmarking: http://www.positioniseverything.net/easyclearing.html The technique I posted is a modified version (without extra classes or empty div holders in the markup).
-
Um ... no, he was right. The proper html 4 way to embed lists is to embed them within the parent level list item. <ul> <li>blah blah blah</li> <li>blah blah blah ( you SHOULD not close this one) <ul> <li>blah blah blah</li> <li>blah blah blah</li> </ul> </li> <li>blah blah blah</li> </ul> That said, the problem with the page is not the lists. You are tripping every IE bug in the book ... HasLayout, the guillotine effect, uncleared floats, DoubleMargin bug, box-model bug. LOL. Don't you just LOVE IE? You also have a serious case of "Divitus", and so much code in your markup and css, I can't begin to try to debug it. You need to make life simpler. replace DIV containers wherever you can simple declare the class or id in a block level tag like: p,h1, h2, ul, ol, etc. ... change this: <div id="trail"> <ul> <li><a href="/"><strong>Home</strong></a></li> <li><a href="/aboutus">About Us</a></li> <li class="last">Rev. Joel Risser</li> </ul> </div><!--trail--> to this: <ul id="trail"> <li><a href="/"><strong>Home</strong></a></li> <li><a href="/aboutus">About Us</a></li> <li class="last">Rev. Joel Risser</li> </ul> That just eliminated two whole lines of code. Also, a "div" is just a markup html placeholder and NOT a logical tag. You can't just slap text into them without proper semantic logical tag containers: like: p, h1, h2, ul, ol, etc. Spans are NOT html placeholders, the are used to embed a style within a span of text within a markup block tag like p, h1, li, etc. The page is lousy with empty "divs" and paragraphs ... an accessibility/SEO nightmare, un-contained spans, uncleared floats. All in all, the page would be better off if you had used old used table based layout, and transitional doctypes. Because it has almost as much tag soup and page weight. It is a beautiful layout. But it uses div tags as if they were table cells.
-
This is the infamous "HasLayout" issue in IE (which will FINALLY be resolved in IE8). You need these two nasty little hacks in your css as follow (for your floated div let's use #floated_div): /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} However, this only works for non-quirks mode pages (must have a doctype). It works superbly with the "clearfix after" technique. /* add this to the bottom of your css - of course replacing "#floated_div" with the id or class you want to clear. No extra divs or markup code is needed ... this will auto clear your floated element. */ #floated_div:after { content: "."; display: block; height: 0; margin:0; padding:0; clear: both; visibility: hidden; } /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} This is the preferred method of float clearing by most professionals. The pseudo class of ":after"
-
If you were not using tables for layout it would be easier and work. But tables have a mind of their own when using percentages (particularly in IE). This was the biggest hassle for us veterans back in the old Netscape/IE wars. It can be done, but not easily, not cleanly across browsers and most definitely not unless the page is 100% valid.
-
On a few sites I manage, I use a curL command to connect to an external database on another host. Recently when I try any search it times out (or gives a connection cannot be established message). Looking at the error logs, I see a strange path (I changed host and php page below): When I google "hermes/bosweb", I see that this error message is all over the place. Is this some evil mySQL injection bot?
-
First, make sure you use a proper doctype and that your code is valid. What you are attempting requires IE6 to stay out of quirks" mode. What you want to do is relatively simple. You want a fixed width editable page area with a different graphic for the left and right of the window. So designate the body with one graphic left and make a container the size of the window with a graphic right. Since these are main page layout containers, use id select elements instead of class (you only want to designate them once per page). Of course, without knowing your graphic type or the context of anything else on the page, I can only show you the technique (you will have to tweak paddings, margins, etc. of your main id. Here is the quick code version: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body {width:100.1%; margin:0; background: url(/images/theme/black/background_03.gif) top left no-repeat} #container {width:100.01%; background: url(/images/theme/black/background_04.gif)) top right no-repeat} #main { width: 900px; background-color: #666666; margin:0 auto; } </style> </head> <body> <div id="container"> <div id="main">Main content</div> </div> </body> </html>
-
Here is a good article on form styling. More importantly it gives you a good idea of HOW to code your forms in the first place, AND use css to style them. Copy and past the code of the example to reverse engineer to fit your style needs. HOWEVER! It is important to note that form controls are, for the most part, OS and browser skin dictated to a very large extent. So attempting to style them for cross browser/platform constancy is absolutely futile -- as graphically illustrated by Roger Johanson's article - Styling form controls with CSS, revisited It is worth seeing.
-
Actually, turns out you're right, N (no surprise). It was a "false/positive" (that gave me momentary but ultimately futile hope). I've been playing with it all week and I can't get it to be stable - and ended up going back to the "Bulletproof web - second edition" technique as a starting point. I WILL solve the liquid height issue somehow!
-
Oh yeah, again, the point why I did it the way I did was to emulate the table as closely as possible without using fixed widths or heights. Looking at it in a fresh light, it was a limited solution because I can see some potential specificity issues in the box element if I want to start modifying paragraphs with classes. But I can also see how to work around that. For me, this was a breakthrough in true liquidity beyond the standard techniques (which don't overcome certain specific issues with boxes in the types of sites I generally code for).
-
At first what I was attempting with my version was to just come as close as I could to just emulating jasonc's table ... a simple css table conversion using px and fixed widths/heights. But then I decided to get into the liquidity of it. Using margins for the body was just a momentary expedient. I would convert it to a page container when placing other elements on the page. However, when using the standard way the column borders and padding for the left/right floats didn't remain relational (forcing the right float to drop down upon minimizing) and it doesn't maintain the text elasticity very well (they bled into the borders). Also using display block in the floats seems to contain the text better - which really doesn't make much sense to me yet why that should work. Oh, you reminded me of the ol' "be kind to opera" rule of using 100.01% for the body width and font-size, but then scaling down the wrap to 99.6%. I initially didn't play with it beyond emulating the table. But here is a modified version that I played with just now adding full text for all elements (I didn't bother modifying the conditional comment for IE and clearing the floats, though, so it, so it will blow up in IE): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body {width:100.01%; font-size:100.01%} #wrap {background:#fff; margin:1% 30%} #box {background:#000; color:#fff; line-height:10em} #box p {line-height:1em;text-align:center} .content {width:45%; margin:1%;padding:1%;float:left;} .leftcell { float:left; color:#fff; border: 1px solid #fff; background: #507bcd; width:100%; padding:.1%; line-height:1em } .rightcell { float:right; color:#fff; border: 1px solid #fff; background: #507bcd; width:100%; padding:.1% 0 .1% .1% ; line-height:1em } --> </style> <!--[if lt ie 7]><style type="text/css">.content {width:43%}</style><![endif]--> </head> <body> <div id="wrap"> <div id="box"> <div class="content"> <p class="leftcell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> </div> <div class="content"> <p class="rightcell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> </div> </div> </body> </html>
-
Remember this ... LVHA. LVHA. LoVeHAte. link, visited, hover, active. This just starts your problem: But you continue using the pseudo links in the wrong order through-out AND add the :focus pseudo element. When :hover is listed BEFORE :visited AND without the other two pseudo link elements defined (link, active) the results are strange because the pseudo links all have an equal specificity of 1.1. IE 6 particularly just goes nuts over this. You should lose the a{} in all cases in your css and replace it with the 4 proper pseudo :links - particularly since you are also using the :focus :hover css2 pseudo elements.
-
Actually, this was a fun little experiment for me this morning which turned out to be a major breakthrough in my liquid scalable layout experimentation. I was able to replicate it as a completely flexible and liquid layout (which I have been heavily researching). It will resize according to the window and will not blow up - I got it down to a 104px wide viewport (the smallest FF would go!) and it validates as html 4.01 strict. I've never been able to make a 100% totally scalable layout before; but I didn't think it was even possible to get THAT small and still remain nearly 100% intact. This is very cool. Try it yourselves (to see the scalability of both floated boxes, change the font color of .rightcell to color:#fff): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body {background:#fff; margin:1% 33%; font-size:100%; } #box {width:100%;background:#000; color:#fff; height:200px} .content {width:45%;text-align:center; margin:1%;padding:1%;float:left} .leftcell { float:left; color:#fff; display:block; border: 1px solid #fff; background: #507bcd; width:100%; padding:.1% } .rightcell { float:right; color:#000; display:block; border: 1px solid #000; background: #000; width:100%; padding:.1% } --> </style> <!--[if lt ie 7]><style type="text/css">.content {width:44%}</style><![endif]--> </head> <body> <div id="box"> <div class="content"> <p class="leftcell">a</p> </div> <div class="content"> <p class="rightcell">b</p> </div> </div> </body> </html> The key to the true scalability was to use percentage (or ems) for margins/paddings - as well as for all other font or positioning dimensions - instead of px. You can even change the fixed heights I used to scalable as well: Replace #box "height:200px" with "line-height:15em" Then add "line-height:1em" to both .leftcell and .rightcell. This worked in FF and IE 6.0 (win 2k) - I am extremely curious (anxious) to know if it works in other browsers/platforms - IE 7, Opera, safari/mac, FF/ubuntu, Netscape, etc. If it does, I've finally found (for me) the path to the layout holy grail ... and most likely have at least a year of frustration ahead of me trying to make intricate web pages scalable using this formula.
-
The container must be at least the same width and height of the image. If you don't designate a height and width for #header, than it is assumed to have none until content is added to it.
-
CSS is not a programming language. BUT if it is an animated gif you can set it as a background image for a css select element like I did here http://www.bluesmandeluxe.com/ae/ That's as far as you can go.
-
That was one of the first things I noticed when looking at your code. Which is why I was a little surprised when I saw you slapped some text standing out there alone and naked within a div tag. STICK with that concept of using proper semantic markup. As the SEO person knows, bots LOVE to find well formed markup with a clear hierarchy of author created items of importance. Header tags are crucial for this (remember always use h1 ONLY once per page ... for the site title); I then personally use h2 for the page title. The easiest thing to remember is if you can separate content from presentation you will never have to worry about fighting with the css AND the markup while debugging - fighting with the css is chore enough. I tell my clients that instead of handing me all of their site's text with notes on how they want it to look, where they want this or that on the page, to design their whole website using nothing but text in a Word document, as if it were a corporate presentation to a board of directors. 1. main table of contents (this will be a sitemap) 2. section table of contents (this will be navbars and section navigation) 3. Clear headers, paragraphs and bulleted lists defining each concept clearly and in a proper contextual order of flow. Now think about it. The whole website is now presented to me on a platter. All I have to do is concentrate on the layout/design and surrounded the existing headers, paragraphs, lists, etc. with the four main standard id containers they belong in - (page >> heading >> body >>footer). For me, learning has always been easier to reverse-engineer an existing concept (in this case web template, css file, graphic construct, etc), break it all apart to see how it works, while researching the syntax and rules, then build it up from scratch as my own. I would recommend that you find a template that closely matches what you are trying to accomplish and while keeping the same concepts of wire-frame construction, completely change everything else to make it unique to you. You can find decent free templates here: http://www.ex-designz.net/template/tempcat.asp?cat_id=13 Don't take these as valid or correctly done on faith (most are, but some don't), use them as a yardstick - but stick with your own concept of good semantic markup. Next, learn the rules by bookmarking this link (almost all professionals still have this link bookmarked): css.maxdesign.com.au/selectutorial Lastly, I also STRONGLY recommend that you buy, in my opinion, one of the best books out on website creation, Dan Cederholm's "Bulletproof Web Design - second edition". $39.99 retail or $26.99 (+ free shipping) at amazon via Dan's website link http://www.simplebits.com/publications/bulletproof/ This book shows how to make your web pages cross-browser/platform compatible AND has the added benefit of showing how to make it 100% flexible by using precision "em" based text/layout. Something every web crafter SHOULD know! (I just started using this myself and am amazed how easy it is). Good luck, Dave
-
It's true TFG. The "Easy Clearing Method" is the solution that most books on css either recommend or provide a link to as being the best float clearing method. I personally, however, like bronzemonkey's version of it much better since it doesn't require putting a blank select in the markup (after all, css is about REDUCING markup level code). BUT! That's not to say using the clear element on its own doesn't ever work. It totally depends on the situation - and this is when it can get tricky trying to determine WHEN the easy fix method is needed and where or how to implement it. The actual example that the article uses even requires an inline clear for a paragraph between two samples (one with and one without the fix). Here is the complete code for the example they use (only I exchanged their old "clearfix" method with bronzemonkey's revised version. You can play with it yourself by removing the clearfix solution from the css and attempting to clear the float just using clear:both in the class. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>clear floats with clear in css</title> <style type="text/css"> <!-- /* added "noclear" container because the original used clearfix as a class in demos 2 */ .noclear { border: 4px solid #000; margin: 10px 0 0; background: #dc8; font-size: 1.2em; clear:both } .noclear p {margin:0} .floatholder { border: 4px solid #000; margin: 10px 0 0; background: #dc8; font-size: 1.2em; } .floatbox { float: left; width: 35%; background: #773; border: 3px solid #f55; color: #ffd; } .floatbox p {margin: 0;} .floatholder p {margin: 0;} .floatholder:after { content: "."; display: block; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; } /* for IE6 only - since IE 6 doesn't support min/max */ *html .floatholder {height: 1%;} /* for IE7 only */ *+html .floatholder {min-height: 1px;} --> </style> </head> <body> <div style="margin: 0pt 20%; height: 1%;"> <div class="noclear"> <!-- add clear:both in the css and you will see it makes no difference --> <div class="floatbox"> <p>This float is not enclosed by the surrounding div container. </p> </div> <p>This container lacks the fix.</p> </div> <p style="height: 20px; clear:both">Just a spacer div between the two demos - remove clear:both to see what happens - this is a case when the clear element works</p> <div class="floatholder"> <div class="floatbox"> <p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!</p> </div> <p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p> </div> </div> </body> </html> Sometimes, I find that I need to float the container that holds the floated elements that I want cleared. This is when I have multiple columns each containing multiple floated elements. It can then get a little hairy. When it does, I know that I either missed something OR I "over-engineered" the clearfix and made it too complicated - when a simple clear:both could have worked in a paragraph somewhere.
-
bronzemonkey's right. For a true cross-browser/platform solution. Using just clear:both can work in IE but doesn't always work in modern Gecko browsers (one of the few, if not ONLY case, where IE actually gets it right).
-
LOL! I didn't even notice that!! Actually you should also avoid using underscore and dashes.