1.) Why does the site look entirely different in Opera and Firefox than it does in Chrome?
2.) How do I use SVG fo the gradiented background in Opera?
3.) What is the best approach to making the logo at the top left?, I am havinga horrendous time with it at the moment.
4.) Why, in chrome, are the tops of the list items going above the bottom of the logo outline?
Also, why, when I give the section with an id of content a top: 2em; statement, does it not move at all?
I know some of these questions may sound simple or even stupid but I hope my knowledge will come back to me when I can see correct and clear solutions.
You could use the border-right on the table assuming you weren’t going to keep that red border.
However if you want a vertical line that keeps equal with both sides then the easiest solution is to wrap the table and the right column in a parent div and just use repeating gif to paint the middle border. It will then always be as long as the longest column.
as Paul O’B said, i see you have good specificity and the rules is obeyed, as you can see from the box model here:
as for the other part: if you want those to be centered as a whole, but columns aligned, but you don’t want #cmembers involved, you could put a wrapper in a wrapper in #cmembers and have text-align:center for the outer and text-align:left for the inner one.
The "*+html" rule makes use of a similar parsing bug but this time only IE7 will get the rules.
The rules cannot be combined and must remain separate and following the original declarations to work. The code is 100% valid but makes use of a broken parser in ie6 and 7.
I see you’ve got this sorted with some good advice above
I have a little trick to share anyway because this is a common problem. When you have a sequence of elements and you apply a margin-right to them to separate them but you don’t want to add a class to the far right element every time then you can often (depending on situation) use this little trick.
Apply a left margin to the elements instead to create the gap but then simply move the main parent back to the left with a negative margin to offset this difference. This negates the first offset and allows the elements to sit where you wanted.
Usually you can do this without changing the html as in your example.
Whoops I edited your post instead of replying to it - sorry.
This was supposed to be my reply.
I’m just a bit confused as to why the CSS webkit gradient does not extend all the way to the bottom fo the page in Chrome.
Try setting html and body to 100% height.
html,body{height:100%}
–Basically, the logo, I am trying to find the best way of having an h1 element with a background image, but the background is larger than the text and the text needs to be positioned pretty much centrally (vertically and horizontally) maybe offset a little in one direction or another.
Well you can just size the h1 to be the exact size you want using width and height. If you want the text vertical and horizontal within that h1 then just use text-align:center and set the line-height to the same vale as the height and the text will be vertically centred. Or instead of text-align:center you could use text-indent to move the text exactly where you want it.
–So adding this allows those new elements to work in IE?
It will allow IE you to style them in IE yes.
How can I get the nav element to be pulled down to be directly ontop of the box below it?
Remove the height from the header and then the nav will sit on top of the content by default.
If you wanted the nav moved down a bit first then apply a margin bottom to the logo that is above it -but you wuld need the logo floated an not absolutely positioned.
The first thing you need to do is declare the html 5 elements as display:block because browsers haven’t caught up with the new elements as yet and will not have the default applied.
header,nav,section{display:block}
That should sort out a number of issues straight away.