|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
April 27th, 2004, 03:35 PM
|
|||
|
|||
|
Doctypes and CSS alignment problems
I have created my first tableless layout with CSS. I have the layout done. All my divs align how I would like them too. However, when I add the XHTML doctype the DIV alignment suddenly goes out of place.
The doctype I used was: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> In an attempt to solve the problem, I used the XHTML validator at the W3C site. I was able to fix all the errors to make it valid XHTML 1.0 Strict. I also validated my CSS style sheet; no errors where returned. However, it said that in order for it to work properly, I must add a parse tree. (What are they talking about?) After all this validation my div alignments are still incorrect. Could someone show me what I did wrong? With Doctype http://www.depiction.net/beta/index.php Without Doctype http://www.depiction.net/beta/index2.php Last edited by depiction : April 27th, 2004 at 03:44 PM.
|
|
#2
April 27th, 2004, 05:28 PM
|
||||
|
||||
|
You might want to recheck your CSS.
Code:
#homepageleft {
float: left;
margin-right: 7px;
padding-left: 2px;
padding-right: 8px;
position: left;
width: 50%;
}
#homepageright {
padding-left: 7px;
position: right;
}
The page does not render correctly in Moz either. That'll be a good looking page when you get it fixed. cheers, gary n.b. IE is really screwy with floats. Go to /*PIE*/ for some good info.
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
April 27th, 2004, 06:13 PM
|
|||
|
|||
|
If you are going to work in CSS, it's very important to start with valid (X)HTML. Most browsers have a "standards mode" and "quirks mode" which will interpret the CSS differently. Setting a correct DOCTYPE - even if the page has validation errors - is what determines what mode the browser will choose.
In addition to that, you will find that even in "standards mode" many browsers - IE box model hack comes to mind - will not follow the CSS specification correctly. The benefit to "standards mode" is that if the browser does it wrong, it should be consistent. In quirks mode, you have no assurance that your CSS will be interpreted correctly since the quirky rules may change without notice. I develop corporate and personal sites entirely in CSS all the time, and I can tell you that if I change the DOCTYPE on any of my sites, you will notice the CSS render differently. You may want to check to make sure the IE box model isn't also causing you grief. I don't have the time right now to check it myself. Cheers!
|
|
#4
April 27th, 2004, 09:32 PM
|
|||
|
|||
|
I'm not familiar with the IE box model. Could someone explain this?
btw.. kk5st, thanks for the great link. I'll read the article about the float problems in IE when I get a chance tomorrow. Last edited by depiction : April 27th, 2004 at 09:35 PM.
|
|
#6
April 28th, 2004, 12:31 PM
|
|||
|
|||
This short short example clearly demonstrates the IE Box Model problem, and it's solution. It was written by Tantek Çelik, who has discovered and solved many CSS issues for designers and developers.
http://tantek.com/CSS/Examples/boxmodelhack.html
|
|
#7
April 28th, 2004, 03:30 PM
|
|||
|
|||
|
I have read both articles, much of it seems foreign to me. However I thought I understood what I needed to add to divs that have margins and padding. I have added
* html div { width: 130px; w\idth: 100px; } with correct dimensions; at least I think. (I have posted my attempt at the same urls I mentioned in my first post of this topic.) The top width is the width for IE5 and the bottom is for all other browsers. Right? Well I've added it, and I still have the same problem. I'm wondering how this pertains to my problem, this is appearing on all browsers, not just IE5, which is what the IE box problem is supposed to solve. It may have worked, but I have IE6, so I'm not able to see if the problem was solved. The more I think about it, IE's method sounds more logical. This way involves less computation. You only have to compensate for the margins. Last edited by depiction : April 28th, 2004 at 03:33 PM.
|
|
#8
April 28th, 2004, 09:28 PM
|
||||
|
||||
|
Quote:
Code:
width: 100px; padding: 20px; border: 30px solid green; Also, do get Mozilla or Firefox. It will give you a standards compliant test bed and, it will make your web surfing more enjoyable.  cheers, gary
|
|
#9
April 28th, 2004, 09:55 PM
|
|||
|
|||
|
When coding, I don't neccessarily care about the width of the content area, but the width the box will take up on my screen. Let's way I have a total width for my layout of 680px. With IE's box model I can just divide it by the # of columns I'm going to have to find the width for each, then subtract the margins. With the non IE model, you have to take into consideration not just the margins, but the padding and borders. Therefore IE's box model is simpliar to code.
I have Firefox, but I don't like it because pages load much slower in it. I hate browsers that create image placeholders that have a little x (as if the image is not available) until the image loads. This makes the pages seem to load much slower than IE. However I suppose I could you Firefox for testing purposes. I prefer to test with IE because 90% of my site's visitors use it. I guess I start coding from scratch again with a doc type previously specified. Maybe this will help me find my problem. Last edited by depiction : April 28th, 2004 at 09:59 PM.
|
|
#10
April 29th, 2004, 01:50 AM
|
||||
|
||||
|
OK, here it is.
#googlead is 123px wide, and you applied 126px to the hack. #homepagecontent is 547+7+1=555px + 126px = 681px, 1px wider than the container so there's not room for the #homepagecontent. You could reduce the width, or better yet, declare no width. You don't need it. The default is 100% of the available space (680) anyway, and the padding-right is lost under the float. To simulate padding in the static element next to a float, give the float margin. Similarly, #homepageright @ 50% + #homepageleft @ 50% + 7px margin is greater than the available container width, so the static element is forced down to clear the float. #homepageright doesn't need a declared width. Also, #homepageleft should have "background: white;" so the grays of .latesttutorials2 won't show through the default transparent background. Quote:
cheers, gary Last edited by kk5st : April 30th, 2004 at 08:24 PM. Reason: blankety blank typos
|
|
#11
April 29th, 2004, 12:56 PM
|
|||
|
|||
|
Browsers may come and go. Standards will stay rock solid. If you want to spend the coming years working on content, make sure it's compatable with at least Mozilla. Microsoft will release patches, etc to IE that will give you inconsistent results. Months from now you'll be trying to add some content, and it'll break the site. That's what standards are good at - consistency, or at least the closest you'll come. You can almost be assured that if you don't consider other browsers it will exclude *some* people and - I don't know about you - but I am very accomadating to all my customers.
If you've ever learned about customer relationship management (and I don't mean software), you'd know that the cost of aquiring a customer is usually at least 5 times greater then retaining one. If your idea customer finds the site, but is turned away because they use a very well respected, yet not as widely used (so far) browser, they will simply click the back button. A good thing to calcuate is the lifetime value of a customer to your business. You might have hundreds of people look at your site, but when it appeals to a single person - the right person - you've made a sale. If they'll buy from you once, they would likely be very receptive to buying again. You'll spend less money convincing someone to buy again then you would if you are trying to find a new customer. That's why businesses like Starbucks work so hard to get you to spend a little bit more every visit, and encourage you to visit as often as possible. Was the drink made differently today? They'll remake it. In fact, they'll remake the beverage until you're satisfied. A happy customer is worth years of income for them. An unhappy customer will not only avoid them, but spread negative publicity. A happy customer will tell an average of 3-5 people. A dissatisfied customer will tell 10. In the real world, if you can make an unhappy customer happy again they will not necessarily tell more people, but they will, on average, spend twice as more with your business. Of course on the internet, if someone isn't happy with your site, they just won't stick around. It's too easy to leave. So perhaps you don't really find much of this very profound, but when you make a decision to specifically exclude some people simply because you don't find the standard and consistent system as "convenient" to you, it really does seem very silly. From a purely business perspective, to leave, even a few, potential customers out in the cold when it could be prevented easily is just plain lazy. By excluding such small-market, yet commonly used browsers, from your site, you're not just excluding geeks who'll wine that it doesn't validate - you'll risk excluding real people who can contribute to your project, participate in your website, or whatever you are trying to achieve with your website. You simply won't know what you are missing. If you're okay with that... then fine. There are other good reasons too. You've probably seen them. It's just a choice.
|
|
#12
April 29th, 2004, 03:38 PM
|
|||
|
|||
|
I've always tried to make my sites compatible for all browsers. However I assumed, since it makes more logical sense, to make my site compatible for the majority than make adjustments to fix problems less used browsers have.
So I've done as you suggested with testing in Mozilla. I have been able to get #homepagecontent in its proper place. However the contents are not in their appropriate places. Homepageleft and Homepageright have a width of 48%. Homepagecontent has a 1px border and a two percent padding. That still allows about 1% of room left over. Therefore homepageright shouldn't have to go to the following line, but it does.
|
|
#13
April 29th, 2004, 10:48 PM
|
||||
|
||||
|
Quote:
cheers, gary
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
