[Forum] Constant problems with div's and css in various browser

[mainframe]

Dear vBulletin,

I'm having serious issues in styling my own mods for vBulletin.
I've done this in the past many times and was used to a table layout but with the new vBulletin I decided to learn using div's. I understand how it works and usually get it right in one browser but when I test on another browser it's totally messed up..
I don't have an example at the moment but I encounter these problems with almost anything I do..
I'm getting awfully tired in trying at the moment, isn't there any way around this?

[Trevor Hannant]

Nothing to say you can't use tables...

[Lynne]

Well, you can use tables in some areas - but they will be complete tables that you add, usually within a div somewhere. But, your html for the page needs to be valid. If you have an actual example, then I may be able to take a look and make suggestions and what to do.

[mainframe]

Well, you can use tables in some areas - but they will be complete tables that you add, usually within a div somewhere. But, your html for the page needs to be valid. If you have an actual example, then I may be able to take a look and make suggestions and what to do.

Well I have an example that I can use some help with. I'm making my own shoutbox and tried to include some of the wysiwyg editors functionality.
With the code below I've added a color picker and smilie box to my shoutbox, works perfectly in Firefox and Chrome but in internet explorer the placement is all messed up.

<li id="shoutbox" class="forumbit_nopost L1">
<div class="forumhead foruminfo L1 collapse">
    <h2>
    <span class="forumtitle">
        <a href="#">{vb:rawphrase shoutbox}</a>
        <div id="shoutboxStatus_loading" style="float:left"><img src="{vb:stylevar imgdir_statusicon}/user-invisible.png"></div>
        <div id="shoutboxStatus_online" style="float:left;display:none"><img src="{vb:stylevar imgdir_statusicon}/user-online.png"></div>
        <div id="shoutboxStatus_offline" style="float:left;display:none"><img src="{vb:stylevar imgdir_statusicon}/user-offline.png"></div>
    </span>
        <a class="collapse" id="collapse_c_shoutbox" href="{vb:raw relpath}#top">
        <img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_c_shoutbox_img}_40b.png" alt="{vb:rawphrase collapse_the_shoutbox}" />
    </a>
    </h2>
</div>
<ol id="c_shoutbox" class="childforum">
    <li id="forum1381" class="forumbit_post L2">
        <div class="forumrow table">
            <div id="shoutboxContainer">
                <div id="shoutboxMessageList" class="smallfont"></div>
                <div id="shoutboxUserList" class="smallfont"></div>
                <div id="shoutboxColors">
                    <div class="editor_controls floatcontainer" id="shoutbox_controls">
                        <li class="popupmenu menubutton colors imagemenu nomouseover nohovermenu editormenu" id="shoutbox_popup_forecolor" style="position:relative">
                            <img src="{vb:raw vboptions.cleargifurl}" class="vbedit_colorbar" id="shoutbox_color_bar" alt="" width="21" height="4" />
                            <div class="popupctrl" id="shoutbox_colorfield"><img src="{vb:stylevar imgdir_editor}/color.png" class="vbedit_colorbutton" width="21" height="16" alt="" /></div>
                            <ul id="colorrow" class="editorpopupbody popupbody popuphover">
                                <li class="colorbutton"><div style="background-color:Black"></div></li> 
                                <li class="colorbutton"><div style="background-color:Sienna"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkOliveGreen"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkGreen"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkSlateBlue"></div></li>  
                                <li class="colorbutton"><div style="background-color:Navy"></div></li> 
                                <li class="colorbutton"><div style="background-color:Indigo"></div></li>  
                                <li class="colorbutton"><div style="background-color:DarkSlateGray"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkRed"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkOrange"></div></li> 
                                <li class="colorbutton"><div style="background-color:Olive"></div></li> 
                                <li class="colorbutton"><div style="background-color:Green"></div></li> 
                                <li class="colorbutton"><div style="background-color:Teal"></div></li> 
                                <li class="colorbutton"><div style="background-color:Blue"></div></li> 
                                <li class="colorbutton"><div style="background-color:SlateGray"></div></li> 
                                <li class="colorbutton"><div style="background-color:DimGray"></div></li> 
                                <li class="colorbutton"><div style="background-color:Red"></div></li> 
                                <li class="colorbutton"><div style="background-color:SandyBrown"></div></li> 
                                <li class="colorbutton"><div style="background-color:YellowGreen"></div></li> 
                                <li class="colorbutton"><div style="background-color:SeaGreen"></div></li> 
                                <li class="colorbutton"><div style="background-color:MediumTurquoise"></div></li> 
                                <li class="colorbutton"><div style="background-color:RoyalBlue"></div></li> 
                                <li class="colorbutton"><div style="background-color:Purple"></div></li> 
                                <li class="colorbutton"><div style="background-color:Gray"></div></li> 
                                <li class="colorbutton"><div style="background-color:Magenta"></div></li> 
                                <li class="colorbutton"><div style="background-color:Orange"></div></li> 
                                <li class="colorbutton"><div style="background-color:Yellow"></div></li> 
                                <li class="colorbutton"><div style="background-color:Lime"></div></li> 
                                <li class="colorbutton"><div style="background-color:Cyan"></div></li> 
                                <li class="colorbutton"><div style="background-color:DeepSkyBlue"></div></li> 
                                <li class="colorbutton"><div style="background-color:DarkOrchid"></div></li> 
                                <li class="colorbutton"><div style="background-color:Silver"></div></li> 
                                <li class="colorbutton"><div style="background-color:Pink"></div></li> 
                                <li class="colorbutton"><div style="background-color:Wheat"></div></li> 
                                <li class="colorbutton"><div style="background-color:LemonChiffon"></div></li> 
                                <li class="colorbutton"><div style="background-color:PaleGreen"></div></li> 
                                <li class="colorbutton"><div style="background-color:PaleTurquoise"></div></li> 
                                <li class="colorbutton"><div style="background-color:LightBlue"></div></li> 
                                <li class="colorbutton"><div style="background-color:Plum"></div></li> 
                                <li class="colorbutton"><div style="background-color:White"></div></li>
                            </ul>
                        </li>
                    </div>
                </div>
                <div id="shoutboxSmilies">
                    <div class="editor_controls floatcontainer" id="shoutbox_controls">
                        <li class="popupmenu menubutton smilies imagemenu nomouseover nohovermenu editormenu" id="shoutbox_popup_smilie">
                            <div class="popupctrl"><img src="{vb:stylevar imgdir_editor}/smilie.png" alt="{vb:rawphrase smilies}" width="20" height="20" /></div>
                            <ul class="editorpopupbody popupbody popuphover">
                                <li style="display:none">&nbsp;</li>
                                <li class="smilie" id="smilie_dropdown_408"><div><img src="images/smilies/smile.gif" alt=":-)" /> Smile</div></li> 
                                <li class="smilie" id="smilie_dropdown_410"><div><img src="images/smilies/wink.gif" alt=";-)" /> Wink</div></li> 
                                <li class="smilie" id="smilie_dropdown_400"><div><img src="images/smilies/biggrin.gif" alt=":-D" /> Big Grin</div></li> 
                                <li class="smilie" id="smilie_dropdown_409"><div><img src="images/smilies/tongue.gif" alt=":-P" /> Tongue</div></li> 
                                <li class="smilie" id="smilie_dropdown_406"><div><img src="images/smilies/redface.gif" alt=":-$" /> Embarrassment</div></li> 
                                <li class="smilie" id="smilie_dropdown_407"><div><img src="images/smilies/rolleyes.gif" alt="8-)" /> Rolleyes (Sarcastic)</div></li> 
                                <li class="smilie" id="smilie_dropdown_402"><div><img src="images/smilies/cool.gif" alt="8-|" /> Cool</div></li> 
                                <li class="smilie" id="smilie_dropdown_404"><div><img src="images/smilies/frown.gif" alt=":-(" /> Frown</div></li> 
                                <li class="smilie" id="smilie_dropdown_405"><div><img src="images/smilies/mad.gif" alt="&gt;-(" /> Mad</div></li> 
                                <li class="smilie" id="smilie_dropdown_403"><div><img src="images/smilies/eek.gif" alt=":-|" /> EEK!</div></li> 
                                <li class="smilie" id="smilie_dropdown_401"><div><img src="images/smilies/confused.gif" alt=":-S" /> Confused</div></li> 
                            </ul>
                        </li>
                    </div>
                </div>
                <div id="shoutboxInputContainer">
                    <input type="hidden" id="prefix" value="">
                    <input id="shoutboxInput" type="text" maxlength="250" onkeypress="postShoutbox(event);" onfocus="refreshShoutbox();" />
                    <input type="hidden" id="suffix" value="">
                </div>
                <div id="shoutboxUserPM" class="smallfont" style="display:none"></div>
                <div id="shoutboxClosePM" style="display:none">
                    <img src="{vb:stylevar imgdir_misc}/cross.png" onclick="closePM();" style="cursor:pointer">
                </div>
                <input type="hidden" id="shoutboxUserPMID" value="0">
            </div>
        </div>
    </li>
</ol>
</li>
<script language="javascript">
    loadShoutbox();
</script>

For the box I'm using classes from vBulletin as this seems to work perfectly on forumhome.
But for the placement of my objects I've included some additional css.

#shoutboxContainer {
    color:#000;
    height:300px;
    background: transparent;
}

#shoutboxContainer #shoutboxMessageList{
    position:absolute;
    top:15px;
    right:177px;
    left:15px;
    bottom:45px;
    overflow:auto;
    border-width:1px;
    border-style:solid;
    border-color:#6B91AB;
}

#shoutboxContainer #shoutboxMessageList div {
    padding-top:2px;
    padding-right:5px;
    padding-left:5px;
    padding-bottom:2px;
}

#shoutboxContainer #shoutboxUserList{
    position:absolute;
    width:150px;
    top:15px;
    right:15px;
    bottom:15px;
    overflow:auto;
    border-width:1px;
    border-style:solid;
    border-color:#6B91AB;
}

#shoutboxContainer #shoutboxUserList div {
    padding-top:2px;
    padding-right:5px;
    padding-left:5px;
    padding-bottom:2px;
}

#shoutboxContainer #shoutboxColors {
    position:absolute;
    left:9px;
    bottom:9px;
}

#shoutboxContainer #shoutboxSmilies {
    position:absolute;
    left:44px;
    bottom:9px;
}

#shoutboxContainer #shoutboxInputContainer {
    position:absolute;
    left:84px;
    right:177px;
    bottom:15px;
}

#shoutboxContainer #shoutboxInputContainer #shoutboxInput {
    height:18px;
    width:100%;
    border-width:1px;
    border-style:solid;
    border-color:#6B91AB;
}

#shoutboxContainer #shoutboxUserPM {
    position:absolute;
    height:18px;
    width:175px;
    right:177px;
    bottom:15px;
}

#shoutboxContainer #shoutboxUserPM div {
    padding-top:2px;
    padding-right:5px;
    padding-left:5px;
    padding-bottom:2px;
}

#shoutboxContainer #shoutboxClosePM {
    position:absolute;
    right:177px;
    bottom:17px;
}

I've attached some screenshots as this better explains my problem, this is just an example, I have these kind of issues with a lot of stuff. sometimes it's firefox messing things up other time it's IE but it usually works fine in one of them.

on http://www.sat-television.com/ulc.php I've created my own upload/download system with table layout, took me just an hour to make it compatible with vBulletin 4 but with table layouts.
I think div layout can possibly render faster than table layout and also seperate content from code which should be good in search engines so I wanted to upgrade my upload/download system to with a div layout.
I tried to redesign some parts from tables to div but I've run into constant browser problems which forced me to stop as I just can't find ways to get it right in all browsers.

Regards,
MainFrame

[Lynne]

Unfortunately, I can't help at all with browser issues since I don't even have IE (I'm on a Mac). However, one mistake you are making (which may be the issue) is using the same id twice. An id may only be used ONCE on a page - ie shoutbox_controls