CSS Tabs

getting the 4th tab to display by default

[guod]

I am trying to move my CSS tabs from the left side of the page to the right side and have done it successfully, but with one minor issue. By default it is loading the tab on the very right (previously first/on very left) first. This makes you read right to left, instead of left to right.

I want the tab that says Description to load first ([img824.imageshack.us ]) How would I go about doing this? I put a test page up for you guys to look at.

[jewelryboxavenue.com ]


thanks

[Major_Payne]

Looked at it in Firefox and it looks like what you want. "Description" tab is first. Got lots of errors:

Result: 14 errors / 190 warnings

line 56 column 1 - Warning: <meta> attribute with missing trailing quote mark
line 56 column 1 - Warning: <meta> attribute with missing trailing quote mark
line 56 column 1 - Warning: <meta> dropping value "><META NAME=" for repeated attribute "content"
line 56 column 1 - Warning: <meta> dropping value "><META NAME=" for repeated attribute "content"
line 67 column 128 - Warning: unescaped & or unknown entity "&catid"
line 159 column 28 - Warning: unescaped & which should be written as &amp;
line 180 column 1 - Warning: discarding unexpected </td>
line 184 column 12 - Warning: <form> isn't allowed in <table> elements
line 183 column 5 - Info: <table> previously mentioned
line 184 column 12 - Warning: missing </form> before <tr>
line 191 column 12 - Error: discarding unexpected </form>
line 225 column 2 - Warning: <link> isn't allowed in <td> elements
line 217 column 11 - Info: <td> previously mentioned
line 230 column 2 - Warning: <link> isn't allowed in <td> elements
line 217 column 11 - Info: <td> previously mentioned
line 244 column 1 - Warning: <link> isn't allowed in <td> elements
line 217 column 11 - Info: <td> previously mentioned
line 276 column 1 - Warning: <style> isn't allowed in <td> elements
line 217 column 11 - Info: <td> previously mentioned
line 341 column 3 - Warning: <form> isn't allowed in <table> elements
line 317 column 1 - Info: <table> previously mentioned
line 341 column 3 - Warning: missing </form> before <tr>
line 352 column 175 - Warning: unescaped & or unknown entity "&maxx"
line 352 column 184 - Warning: unescaped & or unknown entity "&maxy"
line 361 column 113 - Warning: unescaped & or unknown entity "&maxx"
line 361 column 122 - Warning: unescaped & or unknown entity "&maxy"
line 362 column 76 - Warning: unescaped & or unknown entity "&maxx"
line 362 column 84 - Warning: unescaped & or unknown entity "&maxy"
line 368 column 110 - Warning: unescaped & or unknown entity "&maxx"
line 368 column 119 - Warning: unescaped & or unknown entity "&maxy"
line 369 column 76 - Warning: unescaped & or unknown entity "&maxx"
line 369 column 84 - Warning: unescaped & or unknown entity "&maxy"
line 376 column 39 - Error: discarding unexpected </td>
line 377 column 1 - Error: discarding unexpected </tr>
line 378 column 9 - Error: discarding unexpected </font>
line 434 column 6 - Warning: missing </span> before <ul>
line 435 column 26 - Warning: inserting implicit <span>
line 435 column 101 - Warning: inserting implicit <span>
line 435 column 167 - Warning: inserting implicit <span>
line 435 column 231 - Warning: inserting implicit <span>
line 435 column 323 - Warning: inserting implicit <span>
line 435 column 378 - Warning: inserting implicit <span>
line 435 column 444 - Warning: inserting implicit <span>
line 435 column 497 - Error: discarding unexpected </span>
line 470 column 42 - Warning: unescaped & or unknown entity "&username"
line 483 column 70 - Warning: unescaped & or unknown entity "&catalogid"
line 488 column 10 - Warning: missing </a> before </td>
line 490 column 15 - Warning: plain text isn't allowed in <tr> elements
line 486 column 10 - Info: <tr> previously mentioned
line 620 column 2 - Warning: missing </font> before </div>
line 624 column 1 - Warning: inserting implicit <font>
line 624 column 1 - Warning: missing </font> before <div>
line 624 column 6 - Warning: inserting implicit <font>
line 624 column 6 - Warning: missing </font> before <table>
line 624 column 6 - Warning: missing </font> before <table>
line 626 column 67 - Warning: unescaped & which should be written as &amp;
line 639 column 1 - Error: discarding unexpected </font>

Couldn't use validator as you have several non-HTML characters being used on the page.

25 CSS errors [jigsaw.w3.org]

[guod]

really? every time i load the page in different browsers, computers and phones, it displays with the tab on the Very right first.

[rocknbil]

Yeah it's as I thought: your source code is ordered backwards to compensate for right floats. That is,

<li><a href="#">Reviews</a></li>
<li><a href="#">Guarantee</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Description</a></li>

floating them all right displays them in the opposite order. Reviews comes off the "stack" first and goes right, followed by Guarantee, then Features, then Description. What you should probably do is follow the source code: float the LI's left, set a width on the UL, then float **that** right.

Unrelated, but some heavily nested (and deprecated) font tags there, you can eliminate all those with

ul.tabs { font-family: Verdana; }

[guod]

thanks for the tip on the font


Ok. so I need to reorder them, Description, Features, Guarantee, Reviews. THEN tell it to float left. Then set a width of the UL in css? Then how do I float only the UL to the left?


so I add this?

ul { 
float:right;
width:424px

}