Solved

rowspan problem in Internet Explorer

Posted on 2004-08-01
16
2,487 Views
Last Modified: 2012-06-22
Hi..

I've got the following HTML code that looks fine in Firefox, but the word 'ARGHHHHHHHHHH' does not appear where expected in IE. It appears lower down than it does in Firefox, and I can't figure out why.

I will be replacing this word with an iframe, so need the positioning to be accurate.

Any suggestions?



Gareth


<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3"><img src="images/montage_01.jpg" width="157" height="130" alt=""></td>
    <td rowspan="3"><img src="images/montage_02.jpg" width="156" height="130" alt=""></td>
    <td rowspan="5"><img src="/images/spacer.gif" width="14" height="389" alt=""></td>
    <td <img src="/images/spacer.gif" width="473" height="1" alt=""></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td rowspan="5" valign="top">ARGHHHHHHHHHH!</td>
  </tr>
  <tr>
    <td><img src="images/montage_03.jpg" width="157" height="129" alt=""></td>
    <td><img src="images/montage_04.jpg" width="156" height="129" alt=""></td>
  </tr>
  <tr>
    <td><img src="images/montage_05.jpg" width="157" height="130" alt=""></td>
    <td><img src="images/montage_06.jpg" width="156" height="130" alt=""></td>
  </tr>
</table>
0
Comment
Question by:localgareth
  • 7
  • 5
  • 2
  • +1
16 Comments
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11689425
Hey,
You had an open <td> tag  and also a space in front of another tag like this </ td>, I fixed both the problems and you can copy they below code (your code -fixed) and try it out.


<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td rowspan="3"><img src="images/montage_01.jpg" width="157" height="130" alt=""></td>
  <td rowspan="3"><img src="images/montage_02.jpg" width="156" height="130" alt=""></td>
  <td rowspan="5"><img src="/images/spacer.gif" width="14" height="389" alt=""></td>
  <td></td> <img src="/images/spacer.gif" width="473" height="1" alt=""></td>
 </tr>
 <tr>
  <td></td>
 </tr>
 <tr>
  <td rowspan="5" valign="top">ARGHHHHHHHHHH!</td>
 </tr>
 <tr>
  <td><img src="images/montage_03.jpg" width="157" height="129" alt=""></td>
  <td><img src="images/montage_04.jpg" width="156" height="129" alt=""></td>
 </tr>
 <tr>
  <td><img src="images/montage_05.jpg" width="157" height="130" alt=""></td>
  <td><img src="images/montage_06.jpg" width="156" height="130" alt=""></td>
 </tr>
</table>

Cheers,
Mag.

0
 

Author Comment

by:localgareth
ID: 11689432
Hi

Thanks for spotting those errors... however, that doesn't fix the problem.

Still looks wrong in IE, but fine in Firefox.

I'm pretty sure its a rowspan thing, but can't figure it out.

FWIW, it also looks fine in Dreamweaver in design view.


Gareth
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 20 total points
ID: 11689475
Having looked at yor grading history I'm not real interested in participating, other than to let you know you might as well go back to the drawing board right now because you are not going to get IE and Moz based browser to render that the same.  

Get rid of the table and learn CSS is you want it to work.  

Now I will leave this to other experts who don't mind sub-standard grades to walk you through what will probably be an exercise in futility.

Cd&
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11689521
COBOLdinosaur, I dont fully understand what you mean as I am totally new to EE (this post to you is my overall 3rd post...) mind clarfying a bit please?

Thanks,
Mag
0
 
LVL 2

Accepted Solution

by:
mag1c1an earned 480 total points
ID: 11689557
Gareth,
heres your solution:


<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/montage_01.jpg" width="157" height="130" alt=""></td>
    <td><img src="images/montage_02.jpg" width="156" height="130" alt=""></td>
    <td rowspan="3"><img src="/images/spacer.gif" width="14" height="389" alt=""></td>
    <td rowspan="5" valign="top">ARGHHHHHHHHHH!</td>
    <img src="/images/spacer.gif" width="473" height="1" alt="">
    <td height="16"></td></tr>
  <tr>
    <td><img src="images/montage_03.jpg" width="157" height="129" alt=""></td>
    <td><img src="images/montage_04.jpg" width="156" height="129" alt=""></td>
  </tr>
  <tr>
    <td><img src="images/montage_05.jpg" width="157" height="130" alt=""></td>
    <td><img src="images/montage_06.jpg" width="156" height="130" alt=""></td>
  </tr>
</table>

Regards,
Mag
0
 

Author Comment

by:localgareth
ID: 11689559
COBOLdinosaur - Thanks for the suggestion of using CSS... I'll have a look at that.

With regard to grading history, what grades I have awarded experts that have answered my other questions is of no relevance to this question, and of no indication to the grade I may award on this question.

When grading I always try to be fair... giving 'A' to everyone may look pretty, but wouldn't help other community members objectively evaluate an experts rating. This question is worth 500 points, and the expert that provides a solution to this problem will be awarded these points.



Gareth
0
 

Author Comment

by:localgareth
ID: 11689570
Mag... almost there! :-)

Your solution is just about right, except the line...

<img src="/images/spacer.gif" width="473" height="1" alt="">

.... needs to fix the length of the "ARGHHHHHHHHHH!" cell.

Does that make sense?

Thanks


Gareth


0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11689574
mag1c1an,

A lot of us who have been on the site for a while don't care to waste a lot of time on questioners who do not value or appreciate or volunteer work enough to grade fairly most of the time I just ignore questions from them, but when I see tables being so misused where a CSS approach is a no-brainer I just have to say something.

Cd&
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11689596
Cd&, thanks, new here and even made the mistake of putting my website in my posts then found out its against the rules....and cant find a link to edit that :-( anyway....

Gareth, not really, can you explain that please?

Cheers,
Mag
0
 

Author Comment

by:localgareth
ID: 11689660
Mag

I managed to work around this by creating extra tables... it's messy, but seems to work okay in all recent browsers.

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="images/montage_01.jpg" width="157" height="130" alt=""></td>
        <td><img src="images/montage_02.jpg" width="156" height="130" alt=""></td>
        <td rowspan="3"><img src="../images/spacer.gif" width="14" height="389" alt=""></td>
      </tr>
      <tr>
        <td><img src="images/montage_03.jpg" width="157" height="129" alt=""></td>
        <td><img src="images/montage_04.jpg" width="156" height="129" alt=""></td>
        </tr>
      <tr>
        <td><img src="images/montage_05.jpg" width="157" height="130" alt=""></td>
        <td><img src="images/montage_06.jpg" width="156" height="130" alt=""></td>
        </tr>
    </table></td>
    <td valign="top"><table width="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="../images/spacer.gif" width="480" height="1" alt=""></td>
        </tr>
      <tr>
        <td>EVENTUALLY!</td>
        </tr>
    </table></td>
  </tr>
</table>

Thanks for your help anyway, and you still get the points :-)

I guess I should really learn CSS, but for now this messy workaround is okay.


Gareth


0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11689683
Hey,

YEAAA, my first points and an "A" to boot!!!

I now see what you meant about the image controlling the space for the "arrgh", I think I would have gotten it if you showed me the actual images, its hard to understand with the placeholders.

I'll have a look at the code a bit later and see if I can get it a bit cleaner than you.

Dont feel too bad about the CSS thing, I have been webmastering for a looong time and have created over 47 sites but still I use as little CSS as possible because netscape 4 and a lot in that line of browsers have a problem with CSS, tables->no problem plus its not really good to argue with the visitor and tell them to upgrade :-)

Have a nice one,
Mag
0
 

Author Comment

by:localgareth
ID: 11689690
Thanks for the tips Mag... this is only my second web site, and its hard to know the best way of doing things.

Many thanks.


Gareth
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11689735
Most welcome, this is a pretty nice place since we can help each other out, I just discovered it coz I was bored. :-)
If you are new to HTML/webmastering/programming check out my profile in a day or two as I will be adding a couple of links where you can learn quite a bit of stuff that will jumpstart you...not just html but mostly server side scripting like (my favourite) PHP (I come for a c, c++, perl, java background)

See you around!

-Mag
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11700713
Mag, glad to have you here, and you're right, you learn lots from here, especially if you participate in answering questions (believe it coming from someone who leanred 75% of my web knowledge from ee)

Regards,
${Zyloch}
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 11700754
Hey Zyloch,
Thanks for the welcome.
Yeah, I know how frustrating it was when I start building my first sites so I like helping starting out webmasters or people in general.
Who knows, maybe i'll qualify for a premium membership soon :-) but dont know if I'll actually use it because I pretty much program in PHP now and have pals to help me when things go wrong, should be fun anyway.

Cheers,
Mag
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now