/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Tables in IE cutting my image in half?

Copy linkTweet thisAlerts:
Jan 10.2007

Here’s what I have:

[url=http://thsmocktrial.com/tusd/]Live Version (Look in IE & Firefox to see difference)[/url]

View the source to view how I made my tables.

How can I fix this to work in IE as well as Firefox?

Thanks!

to post a comment
HTML

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJan 10.2007 — Hmm, I see no doctype and inappropriate use of tables - bound to cause problems...
Copy linkTweet thisAlerts:
@h3r0authorJan 11.2007 — I'll fix the doctype, but what's wrong with my tables?
Copy linkTweet thisAlerts:
@ray326Jan 11.2007 — That should be a couple of divs, not a table.
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 11.2007 — thats the biggest bodge job of a CSS layout i have ever seen.

get rid of the table there is no use for it what soever.

also validate your code to STRICT before you look into display issues.

remove the depreciated code valign="" align="" etc...

also why the inline styles on the main navigation?

use something a long the lines of:

#nav a{

}

also navigation should be a list not an army of DIVs
Copy linkTweet thisAlerts:
@CentauriJan 13.2007 — Ok, decided to have a play (bored) - layout comes down to two divs (nav and content) within a wrapper div for centering. Some styling of relatively semantic elements gets rid of most of the tacked-on bits and pieces. Try this html [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TUSD</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header">
<h1>Page Heading</h1>
</div>
<div id="wrapper">
<div class="nav">
<h4>Navigation</h4>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
<i></i>
</div>
<div class="content">
<b><a href='index.php'>Home</a></b>
<hr>
<p>TUSD Home</p>
<p><a href='?page=page1'>Page 1</a> | <a href='?page=asdf'>Invalid Page</a></p>
<i>&copy; 2007 Templeton Unified School District. All Rights Reserved.</i>
</div>
</div>
</body>
</html>[/CODE] and this css [CODE]* {
border: 0;
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
color: #000000;
font-family: Helvetica;
}
#header {
background: url(images/header_bg.gif);
height: 154px;
}
#header h1 {
text-align: center;
color: #FFFFFF;
}

#wrapper {
width: 765px;
overflow: hidden;
margin: 20px auto 0;
}
a:link,a:active,a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: underline;
}
.content {
background: url(images/content_bg.gif) repeat-y bottom center;
width: 550px;
float: left;
}
.content b {
display: block;
height: 20px;
background-image: url(images/content_top.gif);
background-position: bottom;
padding-left: 15px;
line-height: 20px;
font-weight: normal;
}
.content i {
display: block;
height: 22px;
background-image: url(images/content_bottom.gif);
line-height: 22px;
font-size: 10px;
text-align: center;
}
.content p {
margin: 0 0 5px 10px;
}
hr {
width: 99%;
margin: 5px auto 0;
border-top: 1px solid #666666;
border-bottom: 1px solid #CCCCCC;
}
.nav {
background: url(images/nav_bg.gif) repeat-y;
width: 200px;
float: left;
margin-right: 10px;
}
.nav h4 {
font-size: 1px;
color: #FFFFFF;
height: 20px;
background-image: url(images/nav_top.gif);
}
.nav ul {
list-style: none;
}
.nav li {
margin-left: 10px;
}
.nav i {
height: 22px;
display: block;
background-image: url(images/nav_bottom.gif);
}
[/CODE]

Study it and learn what makes it work.

Cheers

Graeme
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 13.2007 — one quick note shouldn't you use h2 rather than h4
Copy linkTweet thisAlerts:
@CentauriJan 13.2007 — one quick note shouldn't you use h2 rather than h4[/QUOTE]
Actually, I did have a think about it before I used the h4 - presuming that there would eventually be other content on the page, and that the navigation heading would be down the list in the hierarchy of things.

Cheers

Graeme
Copy linkTweet thisAlerts:
@grumpyoldtechsJan 13.2007 — personally i would use H1 for the main navigation as it is a main heading.

i would stay technically speaking navigation is on the same level as the name of the page which you are on
Copy linkTweet thisAlerts:
@ray326Jan 14.2007 — I believe the general thinking is that there should be an H1 that matches the page title.
Copy linkTweet thisAlerts:
@h3r0authorJan 16.2007 — Thanks so much Centauri!!

I thought I'd take the easy way out and do tables...but it turned out to be the hard way.

yeah yeah I know...divs > tables in Web 2.0...

Thanks bro, I owe you one ?

(I'm better at PHP...at least that's a plus =) )
×

Success!

Help @h3r0 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...