Hi, lately I’ve been working on my new website (www.pokeramateurleagues.com), a website designed to help users manage their own amateur poker leagues. I started with the good old tables but I figured it was time for me to move on to xhtml. Well, it’s tough. The idea is not quite the same but I figured how I can do most of my stuff without tables, unless they were really necessary. However, I have this problem. Well, 2 problems. I’ve asked for help on other forums but I didn’t get any. I’ve searched the web a lot too but no answer. The problem is hard to “search†Problem 1 – When I place a table inside a div, my div (outline) left border’s missing. This problem occurs only under FireFox : When I place a table inside a div, my div left border is missing. It looks like the whole thing move 2 pixel on the left… well I don’t know. This problem is apparent on the first page on the box named “CETTE SEMAINEâ€. Screenshots: Here’s the code used for the section (on the first page, www.pokeramateurleagues.com) titled “CETTE SEMAINEâ€. I’ve posted my entire style sheet at the end of this post. If anyone knows how I can solve this problem, please help me, this is driving me nuts. Code: <div class="box"> <div class="title">Cette semaine</div> <?php if (sizeof($template['data']) > 0) { ?> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="left" class="rowh" width="25%"><b>Ligue</b></td> <td align="center" class="rowh" width="25%"><b>Partie</b></td> <td align="center" class="rowh" width="20%"><b>Date</b></td> <td align="center" class="rowh" width="30%"><b>Gagnant</b></td> <td align="center" class="rowh" width="10%"><b>Enregistrement</b></td> </tr> <?php $line = 'row1'; foreach ($template['data'] as $data) { $line = $line == 'row1' ? 'row2' : 'row1'; $data['game_date'] = Std::formatDate($data['game_date']); // Créé le texte qui sera affiché en dessous du champ // winner. On affiche indéterminé si rien n'est spécifié switch ($data['game_winner']) { case 'none' : $data['game_winner'] = 'Indéterminé'; break; default : $data['game_winner'] = '<a href="index.php?module=User_Detail&amp;lid=' . $data['game_winner_id'] . '">' . $data['game_winner'] . '</a>'; break; } // Créé le texte qui sera affiché en desous du champ // action. On affiche aucune, enregistrement, désenregistrement switch ($data['game_action']) { case 'none' : $data['game_action'] = 'Fermé'; break; case 'reg' : $data['game_action'] = '<a href="index.php?module=Game_Register&lid=' . $data['league_id'] . '&gid=' . $data['game_id'] . '">Ouvert</a>'; break; case 'unreg' : $data['game_action'] = '<a href="index.php?module=Game_Unregister&lid=' . $data['league_id'] . '&gid=' . $data['game_id'] . '">Annuler</a>'; break; } ?> <tr> <td align="left" class="<?= $line ?>" width="25%"><a href="index.php?module=League_Detail&lid=<?= $data['league_id'] ?>"><?= $data['league_name'] ?></a></td> <td align="center" class="<?= $line ?>" width="25%"><a href="index.php?module=Game_Detail&gid=<?= $data['game_id'] ?>"><?= $data['game_name'] ?></a></td> <td align="center" class="<?= $line ?>" width="20%"><?= $data['game_date'] ?></td> <td align="center" class="<?= $line ?>" width="30%"><?= $data['game_winner'] ?></td> <td align="center" class="<?= $line ?>" width="10%"><?= $data['game_action'] ?></td> </tr> <?php } ?> </table> <?php } else { ?> <div class="textcentered"><b>Il n'y a pas parties cette semaine</b></div> <?php } ?> </div> Code (markup): Problem 2 – When I place another div inside a div with a background with a floated image, the background “glitchesâ€. Now this is weird. This problems happens only under Internet Explorer. I suggest you visit www.pokeramateurleagues.com and look at the background under the box named “ACTUALITÉâ€. When you move your mouse over a menu or a link, the background “glitchesâ€. Screenshots: Here’s the code used for the section (on the first page, www.pokeramateurleagues.com) titled “ACTUALITÉâ€. Code: <div class="box"> <div class="title">Actualité</div> <div class="text"> <?php if ($template['data'] != null) { $template['data']['news_text'] = Std::formatText($template['data']['news_text'], 45); $template['data']['news_date'] = Std::formatDate($template['data']['news_date'], PAL_FORMAT_DATE); $template['data']['user_name'] = Std::formatName($template['data']['user_firstname'], $template['data']['user_lastname']); ?> <h2><?= $template['data']['news_title'] ?></h2> <h5><?= $template['data']['user_name'] ?> le <?= $template['data']['news_date'] ?></h5> <img alt="" class="left" src="index.php?module=News_Image&nid=<?= $template['data']['news_id'] ?>" width="80" height="80" /> <p class="align"> <?= $template['data']['news_text'] ?> ... <a class="more" href="index.php?module=News_Detail&nid=<?= $template['data']['news_id'] ?>"> [Lire] </a> </p> <?php } else { ?> <div align="center"><b>Il n'y a pas d'actualités</b></div> <?php } ?> <div class="clear"></div> </div> </div> Code (markup): My stylesheet: (Look for .box declarations) /* DEFAULT *******************************/ body { background : #f5f5f5; color : #333333; font-family : Tahoma, Arial, Sans; font-weight : normal; font-size : 11px; margin : 0px; padding : 0px; height : 100%; } a:link, a:visited, a:active { color : #0b69ad; text-decoration : none; } a:hover { color : #1f88d4; text-decoration : underline; } img { border : 0px; } ul, li, dl, dt, dd { padding : 0px; border : 0px; margin : 0px; list-style : none; } h1, h2, h3, h4, h5 { padding : 0px; margin : 0px; } table { border-collapse : collapse; font-size : 11px; } form { padding : 0px; margin : 0px; } /* HEADER TEXT *******************************/ h1 { color : #1f88d4; font-size : 26px; font-weight : normal; } h2 { color : #0b69ad; font-size : 13px; font-weight : bold; display : inline; } h3 { color : #0b69ad; font-size : 13px; font-weight : bold; } h4 { color : #666666; font-size : 11px; font-weight : normal; } h5 { color : #666666; font-size : 10px; font-weight : normal; } /* FONTS *******************************/ .font1 { color : #999999; font-size : 10px; font-weight : normal; } /* HYPERLINK *******************************/ a.more { color : #0b69ad; font-size : 11px; font-weight : bold; } [...] /* BOX WRAP *******************************/ .box_wrap { padding : 0px 0px 6px 0px; } .box_wrap_left { padding : 0px 3px 6px 0px; } .box_wrap_right { padding : 0px 0px 6px 3px; } /* BOX *******************************/ .box { border : 1px solid #000000; } .box img { border : 1px solid #333333; } .box img.left { float : left; margin : 6px; margin-right : 6px; } .box img.right { float : right; margin : 0px; } .box .title { background : #000000; background-image : url(../images/li_2.gif); background-repeat : no-repeat; color : #ffffff; font-size : 10px; font-weight : bold; padding : 4px; text-transform : uppercase; } .box .text { background-color : #f5f5f5; background-image : url(../images/bg_2.gif); background-repeat : no-repeat; background-position : top right; border : 1px solid #ffffff; line-height : 16px; padding : 6px; text-align : justify; } .box .textcentered { background-color : #f5f5f5; background-image : url(../images/bg_2.gif); background-repeat : no-repeat; background-position : top right; border : 1px solid #ffffff; line-height : 16px; padding : 6px; text-align : center; } .box p.align { margin-top : 4px; margin-bottom : 0px; } .box .rowf { background-color : #e3e3e3; background-image : url(../images/bg_3.gif); background-repeat : no-repeat; background-position : top right; border : 1px solid #ffffff; padding : 6px; } .box .rowh { background : #e3e3e3; border : 1px solid #ffffff; padding : 4px; } .box .row1 { background : #f5f5f5; border : 1px solid #ffffff; padding : 4px; } .box .row2 { background : #ebebeb; border : 1px solid #ffffff; padding : 4px; } [...] Code (markup): Well, so far I did not have many answers in forums. I really hope someone will help me, I think I did my fair share of searching. Thanks
copy the following code and save it as "undohtml.css" in the same folder your style sheet is in. Then add this to the begginning of your original style sheet: @import url(undohtml.css); this will import these styles into your style sheet first before any other styles. What these styles do is remove browser defaults, like margins in IE and header padding and default borders etc.... By doing this you can be sure that the problem doesnt lie in a browser default setting, this gives you %100 control over your styling. check it out after you add this and see if the problem remains. Also, you can add styles in your sheet that are only picked up by firefox using the star html hack add this: * HTML {whatever style you want in FF goes here} IE will not display this style becasue it ignores the universal selector(*) when it comes before HTML and therefore will ignore the whole rule. IF you still are having problems you can use this link http://www.directoryofdocuments.com/css21/ That page on my site is one I did for a class in CSS it has links on the left which lead to many css bug resources and fixes. Good Luck and you can ask me more questions if you have them and I will try and help you out if I can a:link,a:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dd, dt { margin:0; padding:0 } a img,:link img,:visited img { border:none } Code (markup):
Thank you for your quick answer. This is _very_ appreciated. However, I tried everything you said but, unfortunately, nothing changed. However, I found removing my border-collapse style solve everything, except I have larger spaces between my cells, which is supposed to do. Well, If that does the trick, I'll stay without my border-collapse thing. However, if someone knows how I can change the size between the cells, it would be nice. Thanks
The space between cells is controlled by {border-spacing; length[length]}. A single value applies to both horizontal and vertical spacing, two values apply to horizontal and vertical spacing respectively. IE does not support this css property. For IE, you must use the html attribute, cellspacing. In the case of the zig-zag background, IE has a bunch of float+link bugs. Big John has documented a bunch. Your problem doesn't match any exactly, but the peekaboo bug may be a relative. I've used John's test case and applied each of the fixes he mentions, and one or two he doesn't[1]. You may see my demo at peekaboo tests. Give the fixes a try. I'll be interested in how each works with your issue. [1] In the case of the inline-block, it is now in css2.1, so validation is OK. A trick with that fix is to apply the property, then turn around and set display back to block with another style set, thus: .box { color: blue; display: inline-block; } .box { display: block; } Code (markup): This avoids any hiding hacks, and is more future-proof. cheers, gary