HTML - The Td Height Problem, Apple Browsers

Hello,
I'm using FCK Editor in my web appliaction. When I try to insert pictures in text I'm using one table with align="left". Also under the pictures i have a description of the picture. In FireFox everything is fine and description is under the picture, but in IE description of the picture is on the right site. Here is the HMTL code that FCK Editor use when pictures are inserted:

HTML Code:

<table style="width: 144px; height: 209px" cellspacing="1" cellpadding="1" align="left" border="0">
    <tbody>
        <tr>
            <td style="text-align: center"><img style="width: 146px; height: 157px" alt="" hspace="5" align="left" vspace="5" border="1" src="/_userfiles/image/Ronaldo.jpg" /><br />
            <span style="color: rgb(153,51,0)">Test test tes</span><br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<p>This is some <strong>sample text</strong>.&nbsp;&nbsp;&nbsp;This is some <strong........

U can see what I get on my web site:
http://www.macedonium.org/Macedonium...id=229&tid=876
See it in FireFox and in IE

Thanks for the help

Hello,
I created this Wordpress theme
http://www.ilmondodeidoppiatori.it/news/
It's perfect with Firefox but if I open it with Safari, the whole central column goes below the rest of the content: how can I fix it?
Thanks in advance

I recently developed the following site:

www.stripburgerlv.com

If you view it in Firefox it may look just fine. However, in Safari, Opera or IE you'll notice that the right side of the white bounding box disappears. I dont understand?! Part of the image file includes that white edge so why would it not show up in those browsers?

Thanks!

Hi,

I have a website working perfectly in newer version of browsers. However, older version are not working properly. This is my website mis510proj .
Any help?

HTML Code:

  <!-- Page (2 columns) -->
    <div id="page" class="box">
    <div id="page-in" class="box">


        <!-- Content -->
        <div id="content">
        
			 <div class="article">
                <h2><span><a href="#">Improvements for mis510proj :: Dataholics</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-05-01 @ 22:46</span><span class="noscreen"></span>

                </p>
                <p>
		<b>mis510proj</b> :: Our Golf Course DB is need to be update :)
		We have recieved feedbacks from many golfers that they considered the quality of the grass and the house's beverage! and menu.
		We are working on to get those info in order to meet golfer's expectation.<br>
		</br>
		
		
		Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
				</p>
				</div>
			 <div class="article">
                <h2><span><a href="#">Check your golf course</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-27 @ 19:00</span><span class="noscreen"></span>
                    <!--  <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
                    <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
                    <span class="comments"><a href="#">Comments</a></span> -->

                </p>


                <p>
		<b>mis510proj</b> :: Now our golf recommendation engine is here! Just for your dreamed golf courses! 
		mis510proj :: You can simply click either "basic recommendation" or "advanced recommendation". You will find the golf courses!<br></br>
		Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
				</p>
				</div>
			 
			 <div class="article">
                <h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>

                </p>
                <img src="./img/mis510proj.png" alt="MIS510PROJ" /> <a href="http://128.196.27.167:8080/">MIS510PROJ</a>


                <p>
		<strong>MIS510PROJ :: The DATAHOLICS
		We are here to help you live your dream of playing golf! As part of a course, Web Computing and Mining, we 		have designed a MIS510PROJ portal that provides golf course recommendations to interested golf players. The 			MIS510PROJ portal also has a strong business model to it through its linkage to the ebay website that 				permits buying of Golf equipment. The idea behind MIS510PROJ is novel since it is unique and contains a lot 			of unique features that many websites do not. So please have a look at the MIS510PROJ portal and tell us 		what you feel!!</strong>
		
		
		</p>
				</div>
            <!-- Article -->
                       <div class="article">
                <h2><span><a href="#">MIS510PROJ :: DATAHOLICS</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-21 @ 11:49</span><span class="noscreen">,</span>

                </p>


                <p>
		
		<strong>We want to hear from you!</strong><br/>
		<strong>Do you have any suggestions to make? Write back to us!</strong><br/>
				</p>
<!-- begin htmlcommentbox.com -->
 <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
 <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24CLBUSgJb.7rZSJVxzsM8Z1"+"&opts=414&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
				</div>
                 
		  <div class="article">
                <h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>

                </p>


                <p>
		MIS510PROJ :: DATAHOLIC , 
		Golf Course Recommendation.
		What is your preferences when it comed to choose golf course?
				</p>
				</div>
       
	    <div class="article">
                <h2><span><a href="#">MIS510PROJ :: DATAHOLIC</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-19 @ 02:00</span><span class="noscreen">,</span>

                </p>


                <p>
		MIS510PROJ :: DATAHOLIC , 
		we will tell the best golf courses for you by dedicated golfcourse recommending algorithm. 
		This website is part of MIS510PROJ.
				</p>
				</div>
		

            <div class="article">
                <h2><span><a href="#">Plan your Game Today!</a></span></h2>
                <p class="info noprint">
                    <span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>

                </p>


                <p>
		Golf is one of the most stress relieving and enjoyable sports played in the world!
		Come and choose a course closer to you!
		We are here to help you out!
				</p>
				</div>

            <!-- my addition for Amazon -->
            <div class= "article">
            	<h2><span><a href= "equipment.jsp"> Buy Golf Equipment here!</a></span></h2>
            	<p class= "info noprint">
           		 <span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>

			      </p>

			</div>


        </div> <!-- /content -->

Thanks,
DH

Hello All,

Wondered if anyone could help. Have designed a website at www.kerrsminaturerailway.co.uk.

The first problem is the JQuery slide menu nav bar does not match the width of the body. I've set the width of the nav bar as 100% on the CSS, and with both Firefox and Internet Explorer, there is a white gap on the right hand side. Any ideas how to fill this in and have a nav bar the width of the body?

The second problem is I have two links on the banner area, to a Facebook and Twitter group, but both images appear to be hidden by the banner. How do I get them to overlap the banner?

Many thanks in advance, we'd be grateful of any help on both, to smarten up the website.

Peter

Hey all,

I've been trying to fix up my carpet cleaning website. The bee.png image in the top left of my menu bar is giving me problems with older browsers & most hand-held devices, e.g., iTouch, cellphones, etc.

Is there any kind of trick (hack) I could use so that it will properly align with all devices?

Website: www.honeydocarpetcare.com

Also, please let me know if you are noticing things that are out of place. If so, please tell me what browser and version you are using!

Thanks all!

Resolved and links no longer available so text removed.

Hello. I am creating a website that has a frames layout as follows:

_______________________
| ..................................... |
|______________________|
| ..... | ................................ |
| ..... | ................................ |
| ..... | ................................ |
|___|__________________|
|______________________|


Basically a header, a footer, links/navigation on the left, and the page in the center.

My problem now is that I created this site in a high resolution (1280*1024) and when viewed in 1024*768 (standard for a lot of PC's I think), the Links frame becomes scrollable which is very ugly, and since the height of the header and footer are fixed, the main content frame becomes very flat (narrow is not a problem).

My question now is: how do I assign fixed heights to the left (links/navigation) and the main content (center, right) so that if this webpage is viewed at a smaller resolution, the center and links frames are not individually scrollable, but that the ENTIRE page is scrollable (so the footer is not in sight, but at the bottom of the page).


I'm not sure if the above is clear so I will say it again: main content and links are no longer scrollable (even in 1280*1024) but the entire webpage is scrollable. The links and content frames have fixed heights, and if this heigh it larger than the window size, the footer goes down and the entire webpage is scrollable.

Thanks A LOT for your help!

Hi,

My site is here

I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table.

Anyone know how I can get this to look the same in Firefox and IE?

Bit of a numpty so please be gentle

Thanks

Jon

Hello,

I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips?

HTML Code:

<table style="table-layout:fixed;" border=1 width=100%>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
		<td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td>This cell should take the rest of the available column height area</td>
	</tr>
</table>

Thank you.

Hi Folks,

I have a problem with my wordpress template. It's a header - 2 column - footer design:
| ----- header ----- |
| -- col 1 -- | col 2 |
| ----- footer ------ |

The problem is, that in some cases (like the main page), the col 2 has a bigger height than col 1. What I need is col 1 to have the same height so it fills it with the same background top to bottom and doesn't leave this ugly empty part on the bottom. (I don't want to define a set height for the col 1 because both column's content is dynamic. you know the deal)

What's my brainfart?
The site is @ www.priedel.com/dic

Thanks a lot!

Paul

hi guys below is my css code and html code respectively

but id doesn't work in mozila the height of outer div and few more divs doesn't increase automaticaly , please help


//////////css code ////////

*
{
padding: 0em;
margin: 0em;
}

body
{
padding: 35px 0px 35px 0px;
}

#upbg{
position:absolute; text-align:left; margin:0 auto; width: 100%; height:20px; z-index: 1; left: 0px; right:0px; top: 0px; background-color:#434343;
}

#outer{
position:relative;
margin:0 auto;
width: 901px;
border:1px double #FF0066;
background-color:white;
z-index: 1;

}

#container{
position:relative;

width: 901px;
background-image:url('images/bg2.jpg');
background-repeat:repeat-x;


z-index: 1;

}
#image{
width:30%; float:left; position:relative;
}

#contect12{
width:69%; float:right; position:relative; left: 6px; top: 0px;
}

#Contentcontainer{
position:relative;
padding-top:10px;
width:55%;
left:7px;
padding:5px;
float:left;
z-index: 1;
}

#contect1{
border: 3px groove #000000;
width:100%;
position:relative;
background-image: url('images/2.jpg');
background-repeat: repeat-x;
left: 3px;

}

#lmnu{
position:relative; width: 895px; z-index: 1; left: 0px;
}
#lMenubar{
position:relative; width: 20%; padding:5px; float:left; z-index: 1; left: 0px;
}

#lmenu{
width:100%; position:relative; padding-top:10px;
}

#RMenubar{
position:relative; width: 20%; padding:5px; float:right; z-index: 1; left: 0px;
}
#rmenu{
width:100%; position:relative; padding-top:10px;
}



#header{
width:901px;; position:relative; left: 0px; top: 0px ; margin-bottom:2px;
}

#menu{
position:relative;border-width: 1px; border-color: #666666; width:901px; height:31px; background-image: url('images/1.jpg'); background-repeat: repeat-x; left: 0px; top: 0px; border-bottom-style: solid;
}

.td
{
background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px silver groove;
}

.td2
{
background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px lime groove;
}

//////////// Html Code ////////////

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Rishabh Arts ,Art of Making Confident People</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>

<body>

<div id="upbg">
</div>
<div id="outer">

<div id="header"><img src="1.jpg" /><img src="2.jpg" /></div>

<div id="menu" style="left: 0px; top: 0px" ></div>

<div id="container">
<div id="lmnu">
<div id="lMenubar">
<div id="lmenu">

<table style="width: 100%">
<tr>
<td class="td" style="width: 169px" >Menu 1</td>
</tr>
<tr>
<td class="td" style="width: 169px">Menu 1</td>
</tr>
<tr>
<td class="td" style="width: 169px">Menu 1</td>
</tr>
<tr>
<td class="td" style="width: 169px">Menu 1</td>
</tr>
</table>

</div>
</div>
<div id="Contentcontainer">
<div id="contect1">

<div id="image" ><img src="rr.gif" style="float: left" />
</div>


<div id="contect12">

skaydasid<br />
dasdgasd<br />
asdgasdas<br />
dasdhas
</div>

</div>

</div>

<div id="RMenubar" >
<div id="rmenu">

<table style="width: 100%">
<tr>
<td class="td2" >Menu 1</td>
</tr>
<tr>
<td class="td2">Menu 1</td>
</tr>
<tr>
<td class="td2">Menu 1</td>
</tr>
<tr>
<td class="td2">Menu 1</td>
</tr>
</table>

</div>

</div>

</div>
</div>



</div>



</body>

</html>

Hi all,

Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail.

here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php

any help you can offer muchly appreciated!