www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with IE and Rowspan

  1. #1
    Join Date
    Nov 2006
    Posts
    26

    Problem with IE and Rowspan

    I am trying to make a picture grid type layout, the larger pictures are equal to 3 of the smaller ones in terms of height and the widths are the same of all. The following code works in firefox with no spaces between cells or rows, however in ie it seems to put random amounts of space / padding? in between cells and rows. If anyone could tell me what im doing wrong or a better way to get this layout i would appreciate it...here is the code:
    {NEW POST INFORMATION WITH PICTURES SIZES AND LINK!!!!!!!}<table border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin:0; padding:0; border-collapse:collapse; border-spacing:0px;">
    <tr>
    <td rowspan="3"><a class="toggleopacity" href="/off.grid.remote.htm" title="Off Grid Solar Kits"><img src="images/kit_offgrid.jpg" width="240" height="271"></a></td>
    <td ><a class="toggleopacity" title="Solar Portable & Flexible Kits" href="/solar.portable.htm"><img src="images/kit_solar-portable.jpg" width="240" height="90"></a></td>
    <td ><a class="toggleopacity" href="/rv.solar.kits.htm" title="RV Solar Kits"><img src="images/kit_rv.jpg" width="240" height="90"></a></td>
    </tr>
    <tr>
    <td rowspan="3" ><a class="toggleopacity" href="/grid-tie.residential.htm" title="Grid-Tie Residential Solar Kits"><img src="images/kit_gridtie.jpg" width="240" height="271"></a></td>
    <td ><a class="toggleopacity" href="#" title="Marine Kits Comming Soon!"><img src="images/kit_marine.jpg" width="240" height="90"></a></td>
    </tr>
    <tr>
    <td rowspan="3" ><a class="toggleopacity" href="#" title="Water Pumping Kits"><img src="images/kit_water.jpg" width="240" height="271"></a></td>
    </tr>
    <tr>
    <td > <a class="toggleopacity" title="Complete Wind Kits" href="/windpower.kits.htm"><img src="images/kit_wind.jpg" width="240" height="90"></a></td>
    </tr>
    <tr>
    <td colspan="2"><img src="images/kit_modular.jpg" width="481" height="90"></td>
    </tr>
    </table>

    You can see the idea of what i want here: http://www.affordable-solar.com/grid.tie.wind.htm
    I ended up splicing up one giant pic and having photoshop make the table cells but it does not do it the way i want, and is not flexible...i can't just switch pictures out...any help would be greatly appreciated
    Last edited by ripper2020; 11-03-2006 at 01:39 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Something like this:
    HTML Code:
    <div style="width:306px;">
    <!-- three images side-by-side -->
    <img alt="1 of 3 images" src="#" style="width:100px; height:100px; background-color:#d5e9d7; float:left;" />
    <img alt="2 of 3 images" src="#" style="width:100px; height:100px; background-color:#bedfc4; float:left;" />
    <img alt="3 of 3 images" src="#" style="width:100px; height:100px; background-color:#a4d4b0; float:left;" />
    
    <!-- two images side-by-side -->
    <img alt="1 of 2 images" src="#" style="width:150px; height:100px; background-color:#fde2bb; float:left;" />
    <img alt="2 of 2 images" src="#" style="width:150px; height:100px; background-color:#fbd7a1; float:left;" />
    
    <!-- one image -->
    <img alt="(first) 1 of 1 wide images" src="#" style="width:300px; height:100px; background-color:#f9c7c2; float:left;" />
    
    <!-- one image -->
    <img alt="(second) 1 of 1 wide images" src="#" style="width:300px; height:100px; background-color:#f6b3ad; float:left;" />
    
    <!-- one image -->
    <img alt="(third) 1 of 1 wide images" src="#" style="width:300px; height:100px; background-color:#f49f9c; float:left;" />
    
    </div>
    Assuming no border or padding, this is fairly close. If you start adding borders or padding to images or container DIVs, the widths start expanding in a non-parity manner but you'd see that and be able to figure it out.
    I added background-colors and alt="" text to help explain what is what.
    Without knowing the sizes (W & H) of your intended images, I am just postulating a guess and you can changes widths/heights to match what you want. I used a base of 100-pixels and progressed from that.
    Last edited by WebJoel; 11-02-2006 at 06:39 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You have ammended your post (giving appearance that my reply came a day before your post). Now, we have something to look at. This can replicable too.
    I am seeing those 'curvy corner' things with the <b></b>s tags... I know that Stu Nichol's site uses something like this using a multitude <em></em>s or something like that (and it probably raises heck with screen readers. -I really have to re-install JAWS sometime soon...). I think he was using them on CSS-generated flag images (and there is some 400+ "warnings" with validation and he acknowledges this). Sigh... Anything that messes-up Accessibility for the handicapped I am somewhat loathe to encourage, but neither site is mine and I can still be in awe of the technique though. I'm running Linux, -brb while I switch over to other drive and get to my testing tools...

    back:

    I'm going to call it a night. I'll work on this more tomorrow. I downloaded your images for the 'table' thingie, and built a DIV 'box' and through the magic of floating, have gotten this far (see attached image). This will, when completed, be exactly the same in all browsers (...fingers crossed!!).

    Once I get eveything in there, can add some 'padding' to make it look pretty. right now, just trying to get the box populated...
    Attached Images Attached Images
    Last edited by WebJoel; 11-03-2006 at 08:11 PM.
    I build for: Firefox and tweak for IE

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Okay, -all those good happiness feelings from last night were destroyed when I finished this and then looked at it Firefox... My floats were not holding together. Probably a good thing though, -I realized right way that there is a far simpler way to do this thing!
    Instead of a 'wrapper DIV' with three 'floated' DIVs' inside, and 'floated' images inside of each of them, -why not a single "position:relative;" DIV (to 'get control' of what is to come next..), and then "position:absolute;" every single image to fit precisely where you want them to!
    Not only is this precise, it is very succinct in code-size, and very effective cross-browser (no need now to 'pad the image', -let the 'abs-position' be the padding!).

    Using the naming convention of "images/picName.jpg" (if your images are NOT in a folder called "images" you need to strip that out of every instance inmy example), here is what the code looks like:

    <div id="wrapper" style="position:relative; width:744px; height:477px; background-color:white; border:1px dotted gray;">
    <img alt="solar off-grid" src="images/kit_offgrid.jpg" style="position:absolute; left:4px; top:4px;" />
    <img alt="portable solar" src="images/kit_solar-portable.jpg" style="position:absolute; left:252px; top:4px;" />
    <img alt="residential grid-tie" src="images/kit_gridtie.jpg" style="position:absolute; left:252px; top:101px;" />
    <img alt="wind power" src="images/kit_wind.jpg" style="position:absolute; left:4px; top:283px;" />
    <img alt="modular kits" src="images/kit_modular.jpg" style="position:absolute; left:4px; top:379px;" />
    <img alt="rv kit" src="images/kit_rv.jpg" style="position:absolute; left:497px; top:4px;" />
    <img alt="marine kit" src="images/kit_marine.jpg" style="position:absolute; left:500px; top:103px;" />
    <img alt="water kit" src="images/kit_water.jpg" style="position:absolute; left:500px; top:199px;" />
    <div>
    I named the container DIV "wrapper", -but have not assigned any styles to it. You may not even need to use an id="".
    I should add the width: and height: of each image to the respective style="", and of course, the "<a class="toggleopacity" href="foo.htm"> </a>" to activate both the toggleopacity and make the hyperlink for each, but you get the idea now, yes?
    This set-up works now flawlessly with Firefox and IE to the best of my knowledge. Let me know if you have any problems.
    -------------------------------------------------------------------------
    (Below is what the above code replaces: -ya gotta love CSS over HTML's TABLEs. I mean, seriously! )

    <table id="Table_01" width="747" height="476" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td rowspan="5">
    <a class="toggleopacity"class="toggleopacity" href="/off.grid.remote.htm">
    <img src="images/kit_offgrid.jpg" width="241" height="272" border="0" alt="Off Grid Solar Kits"></a></td>
    <td colspan="2" rowspan="2">
    <img src="images/template2_02.jpg" width="12" height="101" alt=""></td>

    <td colspan="2">
    <a class="toggleopacity"href="/solar.portable.htm">
    <img src="images/kit_solar-portable.jpg" width="239" height="90" border="0" alt="Solar Portable & Flexible Kits"></a></td>
    <td colspan="2" rowspan="4">
    <img src="images/template2_04.jpg" width="12" height="203" alt=""></td>
    <td colspan="2">
    <a class="toggleopacity"href="/rv.solar.kits.htm">
    <img src="images/kit_rv.jpg" width="242" height="90" border="0" alt="RV Solar Kits"></a></td>
    <td>

    <img src="images/spacer.gif" width="1" height="90" alt=""></td>
    </tr>
    <tr>
    <td colspan="2">
    <img src="images/template2_06.jpg" width="239" height="11" alt=""></td>
    <td colspan="2">
    <img src="images/template2_07.jpg" width="242" height="11" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="11" alt=""></td>

    </tr>
    <tr>
    <td rowspan="6">
    <img src="images/template2_08.jpg" width="10" height="282" alt=""></td>
    <td colspan="3" rowspan="5">
    <a class="toggleopacity"href="/grid-tie.residential.htm">
    <img src="images/kit_gridtie.jpg" width="241" height="270" border="0" alt="Grid-Tie Residential Solar Kits"></a></td>
    <td>
    <a class="toggleopacity"href="#">

    <img src="images/kit_marine.jpg" width="238" height="90" border="0" alt="Marine Kits Comming Soon!"></a></td>
    <td rowspan="7">
    <img src="images/template2_11.jpg" width="4" height="374" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="90" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/template2_12.jpg" width="238" height="12" alt=""></td>

    <td>
    <img src="images/spacer.gif" width="1" height="12" alt=""></td>
    </tr>
    <tr>
    <td rowspan="5">
    <img src="images/template2_13.jpg" width="10" height="272" alt=""></td>
    <td colspan="2" rowspan="5">
    <a class="toggleopacity"href="waterpump.kits.htm">
    <img src="images/kit_water.jpg" width="240" height="272" border="0" alt="Solar Water Pumping Kits"></a></td>

    <td>
    <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/template2_15.jpg" width="241" height="10" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>

    <tr>
    <td>
    <a class="toggleopacity"href="/windpower.kits.htm">
    <img src="images/kit_wind.jpg" width="241" height="89" border="0" alt="Complete Solar Wind Power Kits"></a></td>
    <td>
    <img src="images/spacer.gif" width="1" height="89" alt=""></td>
    </tr>
    <tr>
    <td>

    <img src="images/template2_17.jpg" width="241" height="12" alt=""></td>
    <td colspan="3">
    <img src="images/template2_18.jpg" width="241" height="12" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="12" alt=""></td>
    </tr>
    <tr>
    <td colspan="4">
    <a class="toggleopacity"href="/blue.link.960.watt.home.grid.tie.system.htm">

    <img src="images/kit_modular.jpg" width="489" height="92" border="0" alt="Modular Solar Kits"></a></td>
    <td>
    <img src="images/template2_20.jpg" width="3" height="92" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="92" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="241" height="1" alt=""></td>

    <td>
    <img src="images/spacer.gif" width="10" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="236" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="3" height="1" alt=""></td>
    <td>

    <img src="images/spacer.gif" width="10" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="238" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td></td>
    </tr>

    </table>
    Last edited by WebJoel; 11-04-2006 at 09:54 AM.
    I build for: Firefox and tweak for IE

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