www.webdeveloper.com
Results 1 to 2 of 2

Thread: padding issues in Chrome

  1. #1
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82

    padding issues in Chrome

    okay so my page renders the way i need it as in the attached image where the table rows are the same height when I take out the padding, but it renders with one row shorter than the other, like in the other image when I put the padding in.. what am I missing? this is only happening in Chrome and only on my wifes monitor, not mine, the 'untitled.jpg' is how it appears in all other browsers (in respect to alignment) regardless of whether or not i put padding in... the weird thing is, I'm usually having problems with IE, not Chrome. the reason I'm so concerned is because since people have different resolution monitors I'm willing to bet her computer is not the only one where it would display the wrong way. here is my code

    Code:
    #bg {position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:-1;}
    #mainbar {position:absolute; width:98%; top:8%; height:26%; background-color:rgba(0, 0, 0, 0.5);
         border-radius:50px 0px 50px 0px; border: solid 3px #df8100;}
    #navtable {position:absolute; top:2%; left:1%; width:95%; height:98%; border-collapse: separate;
          border:1px white solid;}
    #navtable tr td{border-radius:40px 0px 40px 0px;
          font-size:27px; text-align:center; font-weight:bold;}
    #heading {color:orange; font-size:195%; position:relative; top:-15px;
          font-weight:bold; font-family:cursive; opacity:0.98; filter:alpha(opacity=98);}
    #navtable tr td {width:17%; border:white solid 1px;}
          a {color:#a41b13; text-decoration:none; background-color: #ffe188; padding:5px; }

    HTML Code:
    <img id='bg' src='mypics/tmp5head.jpg' />
            <div id='mainbar'>
                <table id='navtable'>
                    <tr>
                        <td rowspan='2' style='width:45%; text-align:center;'>
                            <font id='heading'>YOUR WEBSITE</font>
                        </td>
                        <td><a href=''>STORE</a></td>
                        <td><a href=''>PRINTS</a></td>
                        <td><a href=''>SKETCHPAD</a></td>
                    </tr>
                    <tr>
                        <td ><a href=''>CONTACT</a></td>
                        <td ><a href=''>GALLERY</a></td>
                        <td ><a href=''>REQUESTS</a></td>
                    </tr>
                </table>
            </div>
    EDIT: Now it's appearing the wrong way whether or not padding is there.. weird.. i did find out that the difference is the screen resolution.. how to adjust my code to work in different resolutions in this case?
    Attached Images Attached Images
    Last edited by thewebiphyer; 05-15-2013 at 04:07 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    First, be sure you're including a complete <!DOCTYPE> statement at the top of your document. Then you can try adding the following to the start of your stylesheet:
    Code:
    table, tbody, tr, td { margin:0; padding:0; }
    Although you may have to make some new changes, that should have all browsers displaying these elements the same.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles