I'm fairly new to CSS in general and have been self taught the whole way. I am just messing around with some simple site design and have come across a problem. If you look at http://www.roogle.org you can see that the entire 'email:', form, and submit button section are not lined up together. They also do not look the same in IE and Firefox. I have tried using a table to line them up as well as divs but neither seem to work. Could anyone possibly take a quick look at my code (just look at source, css is in there) and see if there are any obvious mistakes that would prevent those items from not lining up correctly, and being different in IE and Firefox? Thanks in advance for the help.
Initially, you need to put your style declarations inside the head, instead of between the body and the head. You might also consider putting a 'reset' style in your style declarations, like so: h1, h2, h3, p, form, input { margin: 0; padding: 0; } Code (markup): This will override any default spacing that browsers have for elements. Can you show a picture of how you would like the page to look?
This is what I want it to look like: I switched the declarations to inside the head and put a 'reset' still but it didn't seem to do anything.
Edited the page a bit. http://paste.css-standards.org/30788/view There are two main ways to reset margins and padding. One is by using the universal selector which resets them on all elements. And the other was made specifically not to target form controls because of the browser inconsistencies, specifically the input element (so you'd have all the selectors in there except for select, input, button elements).
nicely done. but looking at the page.. still need some fixes. i see you used table.. i think its much better if you use pure css using div tags rather table tags..
Wow. Did you even read the original post? If you did.. you would notice a) the site's URL is http://www.roogle.org/ b) the site's code is already a mess and using tables for layout c) the changes that i made were minimal, in order to get it working, not a complete recode And here is how I would recode it... http://paste.css-standards.org/30793/view (Didn't even need to use a division element - to hell with IE5 and IE6 quirks mode and their not obeying horizontal auto margins. Had to hack for FF2 this time, since every other browser seemed like they were obeying line height properly)
Whoa, I've never seen a Fox hack before. What is it, how does it work, what's up with the not and the lang thing? The only thing I would've changed in the above is I wouldn't bother with an id on the label and just call it "label" in the css... and while Lynx used to show name on type="image" submits, it now displays alt text and JAWS reads it too. Images off, value doesn't display in most browsers (I found out to my dismay).