Very Basic HTML question

C

CoolBug

Expert Member
Joined
Sep 2, 2005
Messages
1,910
Reaction score
1
Hi Guys,

I've made a small site for a client, very basic html, looks fine in chrome & firefox but IE makes the borders all messed up.

I don't get it, it's such basic HTML, no divs or anything?

Help? Please?

Here is a link to a sample page, only a few kb if anyone would like to take a look.

https://dl.dropbox.com/u/8979009/untitled/untitled.rar

This would be a huge help
 
*shrug* It seems to display fine in Chrome, and what you have done is correct. IE just isn't displaying it correctly, or at least they way we'd expect.

My recommendation is that you start using cascading style sheets (I see there are already commented out sections to do this) that should ensure (though not always - especially in IE7!) a correct view across all browsers - it gives you finer control of how the browser is displaying.

Your problem exists with background attribute of the elements.
 
Last edited:
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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit 1: Overview on Counseling</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

#Layer8 {
	position:relative;
	left:1177px;
	top:813px;
	width:44px;
	height:44px;
	z-index:31;
}
#IconResource {
	position:relative;
	left:1177px;
	top:813px;
	width:44px;
	height:44px;
	z-index:31;
}
-->
</style>
</head>
<body>
<table style="width: 1000px" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 1000px; height: 75px;" colspan="3" >
	<img src="Images/Background/top.png" border="0" /></td>
  </tr>
  <tr>
    <td height="*" style="width: 35px" background="Images/Background/left.png" ></td>
    <td style="width: 863px"><p>Lorem ipsum dolor sit amet, ad his autem iriure voluptatibus, vis ad tollit labores. Harum qualisque at sed, interesset quaerendum nam no. Modus oratio reprimique sea in, mei at assum efficiendi, ut per dicam tantas tincidunt. Ea nam similique posidonium persequeris, usu animal appetere corrumpit cu. Est eu perfecto laboramus dissentiet, est impetus efficiantur vituperatoribus ex.</p>
      <p>Ludus accusata ex his, iuvaret ocurreret aliquando ad est, sit wisi animal ea. Regione numquam mel ea. Sed nullam eligendi ne, id illud ponderum usu. No mea indoctum mediocrem. Oportere volutpat dignissim cu sit.</p>
      <p>Vel eu delicata accusamus, adhuc urbanitas ut has. Vim alia sint facilisis te, his minimum atomorum recteque no. Lorem iuvaret et eum. Has viderer mediocritatem ad. Quas dicat apeirian in vis, nibh voluptua sapientem pro ei. An eros cibo reprehendunt mea.</p>
      <p>Est elit clita vocent ea, ex nam nostrud corpora appareat. Eu eos sonet tempor vituperatoribus, id esse hendrerit cum, audire salutatus sea no. Zril regione vivendum et ius. Mea id munere persecuti, eos ne probo possit prodesset, eripuit admodum mei te. Eu postea atomorum vel, eros elitr mei no.</p>
    <p>Ea vim graece quaeque, usu cu utroque suscipit delicatissimi, in ius nemore dissentiunt. Cu integre nominavi cum, sit adversarium efficiantur ei. Vel te choro percipitur, ex ius mucius intellegebat. Accusata volutpat voluptatum sit et. Sea aeterno luptatum efficiendi ex, eu delicata definitiones vim. Ad oblique veritus vituperata sit. Ea vel di**** dolores, vero posse mucius ad quo.</p></td>
    <td height="*" style="width: 100px; background: url(Images/Background/right.png) right"></td>
  </tr>
  <!-- THIS IS THE LOWER BANNER THAT CONTAINS THE LOGOS AND FORWARD / BACK BUTTONS -->
  
  <tr>
    <td style="width: 1000px; height: 79px;"  colspan="3">
	<img src="Images/Background/logos.png" style="width: 1000px; height: 79px" border="0" /></td>
  </tr>
  
  <!-- END OF BANNER THAT CONTAINS THE LOGOS AND FORWARD / BACK BUTTONS -->
  
  
  <!-- THIS IS THE BOTTOM COLOR CODED BANNER -->
  
  <tr>
    <td style="width: 1000px; height: 46px;"  colspan="3">
	<img src="Images/Background/bot.png" />
	</td>
  </tr>
</table>
</body>
</html>
 
Thanks phaktza!

So annoying that something so simple can be such a ball ache. But then again, IE is notorious for being more difficult to develop for.
 
Last edited:
- Don't design layouts using tables - you are making it very difficult for yourself.
- You used 1 table in the layout with different column amounts. IE your header is 1 column, then you have 3 columns for the mid. This always causes weird behaviour.
- Don't use tables! :D
 
Brenden_E said:
- Don't design layouts using tables - you are making it very difficult for yourself.
- You used 1 table in the layout with different column amounts. IE your header is 1 column, then you have 3 columns for the mid. This always causes weird behaviour.
- Don't use tables! :D
Click to expand...

Purist! :p

Tables rock and that's everything else is a lie!!!!!!

/puts on suit of armor *bring it ye css bitches*
 
Using tables for layout is like using male strippers for your bachelors party. Sure you can do it, but is it a good idea?
 
CoolBug said:
Thanks phaktza!

So annoying that something so simple can be such a ball ache. But then again, IE is notorious for being more difficult to develop for.
Click to expand...

A pleasure. But I also agree with Brenden_E's stance - my preference is <DIV> elements styled using CSS.
 
Brenden_E said:
- Don't design layouts using tables - you are making it very difficult for yourself.
- You used 1 table in the layout with different column amounts. IE your header is 1 column, then you have 3 columns for the mid. This always causes weird behaviour.
- Don't use tables! :D
Click to expand...

Look, it shouldn't. CoolBug uses colspan= correctly, and it displays fine in Chrome. That being said, it is always best to avoid tables where possible.
 
Managed to fix it while fondling with the tiddy widths (and somehow not affecting Chrome or Firefox)

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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit 1: Overview on Counseling</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="75" colspan="3" >
	<img src="Images/Background/top.png" border="0" /></td>
  </tr>
  <tr>
    <td height="*" width="35" background="Images/Background/left.png" ></td>
    <td width="864">		
	Lorem ipsum dolor sit amet, ad his autem iriure voluptatibus, vis ad tollit labores. Harum qualisque at sed, interesset quaerendum nam no. Modus oratio reprimique sea in, mei at assum efficiendi, ut per dicam tantas tincidunt. Ea nam similique posidonium persequeris, usu animal appetere corrumpit cu. Est eu perfecto laboramus dissentiet, est impetus efficiantur vituperatoribus ex.

Ludus accusata ex his, iuvaret ocurreret aliquando ad est, sit wisi animal ea. Regione numquam mel ea. Sed nullam eligendi ne, id illud ponderum usu. No mea indoctum mediocrem. Oportere volutpat dignissim cu sit.

Vel eu delicata accusamus, adhuc urbanitas ut has. Vim alia sint facilisis te, his minimum atomorum recteque no. Lorem iuvaret et eum. Has viderer mediocritatem ad. Quas dicat apeirian in vis, nibh voluptua sapientem pro ei. An eros cibo reprehendunt mea.

Est elit clita vocent ea, ex nam nostrud corpora appareat. Eu eos sonet tempor vituperatoribus, id esse hendrerit cum, audire salutatus sea no. Zril regione vivendum et ius. Mea id munere persecuti, eos ne probo possit prodesset, eripuit admodum mei te. Eu postea atomorum vel, eros elitr mei no.

Ea vim graece quaeque, usu cu utroque suscipit delicatissimi, in ius nemore dissentiunt. Cu integre nominavi cum, sit adversarium efficiantur ei. Vel te choro percipitur, ex ius mucius intellegebat. Accusata volutpat voluptatum sit et. Sea aeterno luptatum efficiendi ex, eu delicata definitiones vim. Ad oblique veritus vituperata sit. Ea vel di**** dolores, vero posse mucius ad quo.		
	</td>
    <td height="*" width="135" background="Images/Background/right.png"></td>
  </tr>
  <tr>
    <td height="46"  colspan="3">
	<img src="Images/Background/logos.png" width="1000" height="79" border="0" /></td>
  </tr>  
  <tr>
    <td height="46"  colspan="3">
	<img src="Images/Background/bot.png" />	</td>
  </tr>
</table>
</body>
</html>

Glad I don't have to do too much fixing just to get it to work on IE as well :)

I wont be designing in tables anymore, thanks for all your advice!

I never really designed much front end stuff, usually we throw that at graphic designers which I'm totally not.

Looks like I might want learn CSS more!
 
Last edited:
look start with the design layout of the site. go for tables, avoid layers. as layers can only be used for temporary site designs, that you will only need later on in website design. then start of with a big table and then continue putting more tables into tables with make life very easy when you edit the site later. you can work with tags , selecting each region making sure the layout if fine. then start putting logos , data , forms into that sections. the best web design program out is Microsoft Expression 4 SP1 update. cheers, metrohub.
 
metrohub said:
look start with the design layout of the site. go for tables, avoid layers. as layers can only be used for temporary site designs, that you will only need later on in website design. then start of with a big table and then continue putting more tables into tables with make life very easy when you edit the site later. you can work with tags , selecting each region making sure the layout if fine. then start putting logos , data , forms into that sections. the best web design program out is Microsoft Expression 4 SP1 update. cheers, metrohub.
Click to expand...

What the hell? Tables, seriously? Don't listen to this guy for a second. Besides, this thread is an example of why you shouldn't use tables!

P.S. Capitals and paragraphs might help to get you taken seriously.
 
Last edited:
if you want to do this again, declare the html5 doctype and use a css reset to get the pixels lined up across browsers.
start here: http://html5boilerplate.com/

the issue with tables is semantic. tables can work as layout elements, but they are overkill and don't make sense from a search and accessibility pov. use tables for tabular data. you also can't regulate cellspacing as a css property (harder to reset tables across browsers). if you're going to be griping about semantics, you'd better make sure the rest of your structure is semantic. ;)

that said, there's certain things which divs just don't do as simply as a table from a markup/rendering point of view: auto-expanding column heights, and replicating tab stops in text come to mind.
 
metrohub said:
look start with the design layout of the site. go for tables, avoid layers. as layers can only be used for temporary site designs, that you will only need later on in website design. then start of with a big table and then continue putting more tables into tables with make life very easy when you edit the site later. you can work with tags , selecting each region making sure the layout if fine. then start putting logos , data , forms into that sections. the best web design program out is Microsoft Expression 4 SP1 update. cheers, metrohub.
Click to expand...

thanks for warning me about this app. i'll make sure to give it a wide berth :p
 
murraybiscuit said:
if you want to do this again, declare the html5 doctype and use a css reset to get the pixels lined up across browsers.
start here: http://html5boilerplate.com/

the issue with tables is semantic. tables can work as layout elements, but they are overkill and don't make sense from a search and accessibility pov. use tables for tabular data. you also can't regulate cellspacing as a css property (harder to reset tables across browsers). if you're going to be griping about semantics, you'd better make sure the rest of your structure is semantic. ;)

that said, there's certain things which divs just don't do as simply as a table from a markup/rendering point of view: auto-expanding column heights, and replicating tab stops in text come to mind.
Click to expand...


love html5boilerplate, I usually use html5shiv rather than modernizer but I diffently need to use modernizer!
And yes I am a purist, I like to think so. I can however understand why so many(usually hardcore backend) developers prefer tables. And it is IE to blame. Floats, haslayout , inline-block all require so much learning to find out why somethings looks the way it does in IE.

jQuery have made a bold move, apparantly from jQuery 2.0 there will be NO support of IE6,7 this comes along with Microsoft announcing window updates will include/force users to update to atleast ie8.
Still though ,so much css3 goodness thats not even supported in ie9 (css transitions):((
Front end can be such a ball ache, but in a world with no ie, man o man would i have so much moar fun
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X