My paragraph styling

HTML & CSS
1

Hi

I have created a mock up of a webpage. Everything is displayed correctly in IE, firefox, mozilla thus far! I have also started to construct an alternative style sheet for IE.

In IE 7 (compatibility view) however the paragraph ‘Click on a brand you want and find the model you require then ring 08456 00 22 55 for the best price’ falls right of the logos and not at the bottom.

Here is the site

The css i have used for that section is:


#banner { width:960px; height:356px; background:url(../assets/img/bannerGradient2.jpg); margin:0 0 3px 0; position:relative; }
#banner #logos { width:780px; height:356px; /*float:left;*/ position:absolute; left:0; }
/*#banner #logos img { width:70px; height:55px; float:left; margin:2px; }*/
#banner #logos ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 0px;
    width:780px; height:356px;
}
#banner #logos ul.thumb li {
    margin: 4px; padding: 0px;
    float: left;
    position: relative;
    width: 70px;
    height: 55px;
}
#banner #logos ul.thumb li img {
    width: 70px; height: 55px;
    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic; 
}
#banner #logos ul.thumb li img.hover {
    background:url(../assets/img/logoBackground.png) no-repeat center center;
    border: none;
}
#banner h1 { color:#000; margin:2px 0 0 10px; }
#banner p { color:#000; width:630px; float:left; margin:0 0 0 10px; }
#banner #featureImage { float:right; width:330px; height:356px; }

Can anyone indicate where i’ve gone wrong please? Thanks

2

Something is wrong with jQuery.

You have this DOM change made by jQuery:

<li jQuery15106379334467028308><a href="http://www.yamahaproaudio.com/" target="_blank" title="Yamaha" ><img src="assets/logos/Yamaha.png" alt="Yamaha" /></a>
        
          <p>Click on a brand you want and find the model you require then ring <b>08456 00 22 55</b> for the best price.</p>
[COLOR="Red"]</li>[/COLOR]

making <p> a child of <li>.

The way you originally have it is like this:

<ul class="thumb">
[...]
 <li><a href="http://www.yamahaproaudio.com/" target="_blank" title="Yamaha" ><img src="assets/logos/Yamaha.png" alt="Yamaha" /></a></li>
 <p>Click on a brand you want and find the model you require then ring <b>08456 00 22 55</b> for the best price.</p>
</ul>

which is no better, since <p> cannot be a direct child for <ul>.

3

Hi Thank you for your reply.

I have just added that sentence in as a <li> and styled it to dropped beneath the last row of logos which is what i am looking for. It works in the current browsers i have tested in!

Thaks once again

4

You’re welcome :slight_smile: