2 replies [Last post]
kaya1975
kaya1975's picture
Offline
Regular
UK
Last seen: 13 years 16 weeks ago
UK
Joined: 2007-05-16
Posts: 16
Points: 0

Hi all,

Tried and read all sorts now and i can't get rid of this white gap between the banner and the leftcol - i had the gap between the sliced banner images but getting rid of the one of the tags sorted it. - doesn't appear in dreamweaver preview

I'm just moving form tables to CSS and it rocks but this is destroying me!! - also why in firefox does the leftbox appear below the rightcol - haven't got to looking at this prob yet...

Thanks in advance for all the help

layout.css

body { margin: auto; width: 750px; }

.container {

}

#banbox {
padding 0px;

}

#imgbox {
padding: 5px 10px 5px 10px
}

#leftbox {

float: left;
padding: 10px 5px 5px 10px;
}

#rightbox {
float: right;
}

#leftcol {
float: left;
width: 172px;
height: 600px;
hight 600px;
background-color: #f9cdce;
/*background-image: url(../images/sidebar.jpg);
background-repeat: repeat-y;*/
}

text Css

h1 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font: "Air Conditioner";
font-size: 18px;
color: #5b2b2b;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif
font: Tahoma;
color: #5b2b2b;
}

@font-face {
font-family: "Air Conditioner";
font-style: normal;
font-weight: normal;
src: (fonts\cool_off\AIRCONDI.TTF);
}

.cool {
font-family: Air Conditioner, Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #330000;
}

index.htm

Untitled Document


Welcome to Vdub Brides

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras rhoncus bibendum dui. Nunc nisl diam, vehicula ac, feugiat sit amet, elementum vitae, massa.
Aenean convallis est in est. Integer vitae diam. Ut vulputate mauris in tellus. Praesent lacinia, est eget dictum rutrum,
nisl risus imperdiet odio, at lacinia pede massa ac ligula.
Praesent ultricies tempor risus. Maecenas mi. Donec sit amet quam. Quisque sit amet sem eu lectus dapibus viverra. Quisque condimentum augue id tellus. Etiam facilisis aliquam erat. Cras blandit molestie sapien. Fusce tortor odio, euismod in, hendrerit vel, mattis quis, orci. Morbi placerat. Fusce gravida eros eu nulla.



this is my first code post so if i messed it up - soz :bigoops:

thanks again Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You should try searching the

You should try searching the forums, this comes up at least once per week, often much more frequently.

Images are inline elements, browsers will line them up with the text-baseline by default. The text-baseline is not the bottom, there has to be room for letter descenders (think the dangly bits on g, j, p, q & y). Sometimes this doesn't show in FF et. al. as the image is overflowing the element. It will always show up in IE (which expands instead of overflowing).

The solution is to control either vertical-align, set to bottom; or to set the image to be display:block; Both together are not necessary.

kaya1975
kaya1975's picture
Offline
Regular
UK
Last seen: 13 years 16 weeks ago
UK
Joined: 2007-05-16
Posts: 16
Points: 0

Thanks :)

it all becomes clear now - thanks again - i'll refine my searches nxt time too - thanks Smile