SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My paragraph styling

    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:
    Code:
    #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
    Last edited by DaveMaxwell; Mar 2, 2011 at 11:46. Reason: fixed code tags

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something is wrong with jQuery.

    You have this DOM change made by jQuery:
    Code:
    <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>
    </li>
    making <p> a child of <li>.



    The way you originally have it is like this:
    Code:
    <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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •