Help with CSS issue

Hello,
I have been following the CSS3 Live course for the past 2 weeks and just finished it today. It was excellent.

I have moved on to making a site for a birding group locally and hope to use some of the new techniques I have learned.

I have not done any web design in along time and seem to have forgotten some of it and cannot figure bits out.

I hope you guys can give me a helping hand into fixing bits where I have become stuck.

The site is currently at http://log.neiltonge.co.uk

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.

Thanks

Neil

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.

good math, Paul O’B :slight_smile:

but since OP could later decide about how many columns there are (2 or 3 or 5) these calculations will always be approximate.

hence,

and use % since it easier: 45% for two, 29% for three, etc :wink:

#cmembers div.last {
color:blue;
margin-right:0;
}

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” is the star selector hack which supplies styles to only IE6 and is used to pass the value [B]display:inline[/B] to only IE6 (because that will make it behave as [URL=“http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/”]inline-block when it has been set to haslayout mode in a separate previous rule).

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.

Hi,

I see you’ve got this sorted with some good advice above :slight_smile:

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.


[B]#cmembers {margin-left:-2%}[/B]
#cmembers div {
    border: 1px solid black;
 [B]   width: 44%;[/B]
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin-bottom: 1em;
    padding: .8em;
    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);
   [B] display:inline-block;[/B]
[B]    margin-left:2%;[/B]
}
[B]* html #cmembers div{display:inline}
*+html #cmembers div{display:inline}[/B]



<section id="cmembers">
            <div>Peter f</div>
            <div>Tom f</div>
            <div>Claire f</div>
            <div>Mark f</div>
            <div>Richard f</div>
        </section>

Of course if you are good with php then adding a class is no problem anyway :slight_smile:

You’ll have t post a screenshot so we can see what you mean.:slight_smile:

More:

6.) In IE7 why is the tagline left aligned instead of right aligned like in other browsers?

7.) Why, when viewing an iphone, is the left hand side of the site cut off?

Set the iframe to display:block and the margin:auto will take effect.


iframe {
border:1px solid black;
display:block;
height:450px;
margin-left:auto;
margin-right:auto;
width:800px;


}



Sorry about the multiple replies but you asked a lot of questions for one sitting :slight_smile:

I don’t own an iphone but the safari sdk iphone emulator shows it rendering ok.

Whoops I edited your post instead of replying to it - sorry.:blush:

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.



h1{
margin:0;
width:150px;
height:50px;
text-align:center;
line-height:50px;
}

–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.


#logo h1 {
    font-size: 25pt;
    text-shadow:2px 2px 2px #333333;
    border: 1px solid yellow;
    margin:40px 0 2em 40px;
    float:left;
    width:200px;
    height:50px;
    text-align:center;
    line-height:50px;
}


That’s the html5 doctype and does not trigger quirks mode in any browsers.

Hi,

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.

  1. You can find some examples here that should help:

http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc&extOpera=1

  1. I’m not sure what you are asking exactly :slight_smile: What do you want to do with the logo?

  2. Latest versions of Chrome and Safari look the same to me.

  3. top:2em will do nothing unless you define a positioning system for it. Did you mean margin-top:2em?

e.g.


#content {
  display:block;
 margin-top:2em;
}


You’ll also need the fix for IE to recognise the html5 elements.

I really need some good solid advice in here about these issues.

Please can some people help.

Thanks

Neil

Please can someone give me a hand here

Hi,

Yes safari is being a it awkward but it’s just a matter of findng something that it likes.

This seems to work for me.


[B]html{height:100&#37;}
body{min-height:100%}[/B]
html {
  [B]  background-color: #2F65A6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F65A6), to(#6EAAD9));
    background-repeat: no-repeat;[/B]
}
body {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F65A6), to(#6EAAD9));
    background-repeat: no-repeat;
[B]    padding:0 2em;[/B]
    font-family: arial, sans-serif;
}
#container {
    width: 960px;
    border: solid 0px black;
 [B]   margin:0 auto;
    padding:1em 0;[/B]
}


Yes that’s fine for all browsers except Opera. Opera doesn’t do parts of a percentage unfortunately.

e.g.This is miles out in opera


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
#outer {
    width:1000px;
    float:left;
    border:1px solid #000;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}
/* 8 x 12.5% = 100% exactly (12.5% should equal 125px) */
li {
    float:left;
    width:12.5%;
    background:red
}
li:nth-of-type(odd) {
 background:green
}
</style>
</head>
<body>
<div id="outer">
    <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
        <li>example 4</li>
        <li>example 5</li>
        <li>example 6</li>
        <li>example 7</li>
        <li>example 8</li>
    </ul>
</div>
</body>
</html>


If opera support is needed then best to stick to whole number percentages.

#cmembers div
{
border: 1px solid black;
width: 29%;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

margin-bottom: 1%;
padding: .8em;

background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);

display: inline-block;
margin-right: 2%;
}

#cmembers div{zoom:1; display:inline}

basically hasLayout and display:inline work similarly to the standard display:inline-block, and zoom:1 triggers hasLayout in ie. so the two

zoom:1;
display: inline;

should be enough. you need to play a little with it 'till it works using ie targeting hacks Paul O’B told you about :wink: