Hi there

I've been having great difficulty with two things:

  • Floating columns to work correctly in IE8 and IE7 and
  • ul and li margin and padding spacing from left column

I wondered whether someone can please advise what I have done wrong in my CSS. I'm sure it's the floats that aren't used correctly or perhaps the display inline. Not sure.

Here is the development site and one of the pages I am talking about: http://ewh.demo.workingwebsolutions.co.nz/services/worksite-assessment.html

and the CSS pertaining to the top right content section block is here: It is the right column I am having an issue with and I have bolded the CSS where I think perhaps the css error is. Thanks for your help in advance.

#section-center-column  {
    float: left;
    width: 620px;
    clear:right;
    background-color: white;
    color:#333;
    margin: 0;
    padding: 0;
}

#large-panel-box {
/*this is the panel box used for text and images in body on section pages*/
border: 1px solid #ccc;
background-color: white;
padding: .5em;
float:left;
clear:right;
width: 100%;
margin: 0;
}

#large-panel-box .imgabout {
float:right;
padding: .3em;
margin: 0 0 0 .5em;
border: 1px solid #999;
}

#large-panel-box h2 {
font: bold .8em Verdana, Geneva, sans-serif;
color: #660000;
padding: 0;
margin: 0 0 .5em 0;
line-height:1.8em;
text-align:left;
}

#large-panel-box h3 {
font: bold .9em Verdana, Geneva, sans-serif;
color: #000;
padding: .5em 0 .5em 0;
margin: 0;
line-height: 1.3em;
}

#large-panel-box h4 {
font: bold .8em Verdana, Geneva, sans-serif;
color: #000;
padding: .5em 0 .5em 0;
margin: 0;
}

**#large-panel-box .colleft {
/*style for about and section pages*/
float:left;
display:inline;
clear:both;
width:46%;
padding:0;
margin:0;**
}

#large-panel-box .colleft img {
float:left;
clear:right;
padding: .3em;
margin: 0;
border: 1px solid #ccc;
}

**#large-panel-box .colright {
/*style for about and section pages*/
float:left;
display:inline;
clear:right;
width: 46%;
padding:0;
margin:0;**
}

**#large-panel-box .colright ul li {
margin: .5em 0 .5em 0;
line-height: 1.6em;
}**

4 answers

1
point

Hey there fellow Kiwi - let's tackle the first issue which is the columns wrapping on a new line.

Remove the float: left from the .bottom-content-block class or set a width to accomodate all the floated elements inside it. Also be cautious when using static dimensions(px) for width combined with relative (em) dimensions for the margins. Users that increase their font size might affect your margins, thus having a column wrap on a new line. Also float: left is not meant to work on inline elements so you need display: block or display: inline-block

As for the list styles - I can't tell what's wrong with them?

Cheers,

Marko

Answered over 6 years ago by Marko Ivanovski
0
points

Hi Marko Thanks for the assistance with that. It was definitely the display block that was affecting the bullet points from aligning correctly to the right. Also, good to know about the width px and margin ems. I have set the widths now to %. Hope this is OK to do this.

Also, one question re Doctype (and probably one that I should read somewhere) - how does one display one's photo?

Thanks again for your help.
Cheers Felicia

Answered over 6 years ago by Felicia
0
points

Also, one question re Doctype (and probably one that I should read somewhere) - how does one display one's photo?

you need a gravatar: http://en.gravatar.com/

Answered over 6 years ago by Tony Crockford
0
points

Thanks Tony. :-)

Answered over 6 years ago by Felicia