Member Avatar for MrScruff

If you take a look at my website in firefox:

and in internet explorer:

you will see the top menu in internet explorer is on the left.

The css code I have used is:

.overbodyline
{ 
background-image:url(/music/images/main.gif);
background-repeat: repeat-y;
{T_TH_COLOR1} solid;
font-size : {T_FONTSIZE2}px;
color : {T_BODY_TEXT};
padding: 0px 0px 0px 40px;
}

and the table code is as follows:

<table width="100%" cellspacing="0" border="0" class="overbodyline">
      <tr><td><table class="stand" width="700px">random gubbins
</table>
</td></tr>
<table>

For some reason the rest of the padding is fine. I've attached the whole file if you need to check out anything else.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
/*
  The original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body { 
	background-color: {T_BODY_BGCOLOR};
	scrollbar-face-color: {T_TR_COLOR2};
	scrollbar-highlight-color: {T_TD_COLOR2};
	scrollbar-shadow-color: {T_TR_COLOR2};
	scrollbar-3dlight-color: {T_TR_COLOR3};
	scrollbar-arrow-color:  {T_BODY_LINK};
	scrollbar-track-color: {T_TR_COLOR1};
	scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover		{ text-decoration: underline; color : {T_BODY_HLINK}; }
hr	{ height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.mainline {padding: 0px 2% 10px 0px; border="1"; border-color: #882282;}
.leftpad {padding: 5px 0px 5px 40px}
.rightpad {padding: 5px 90px 5px 0px}
.stand {border-style: solid; background-color: #f5f5f5; border="1"; border-color: #882282;}
.bodyline	{ background-image: url(/music/images/main.gif); background-repeat: repeat-y; {T_TH_COLOR1} solid;font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT}; padding: 0px 120px 0px 40px;}
.overbodyline	{ background-image: url(/music/images/main.gif); background-repeat: repeat-y; {T_TH_COLOR1} solid;font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT}; padding: 0px 0px 0px 40px;}

.topline { background-image: url(/music/images/topback.gif); background-repeat: repeat-y; border: 0px {T_TH_COLOR1} solid;font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT}; p/adding: 10px 140px 10px 0px;}
.blackwhite	{ background-color: #000000; border: 1px {T_TH_COLOR1} solid;font-size : {T_FONTSIZE2}px; color : #FFFFFF ; cellspacing : 20px; cellpadding : 20px;}
.paperback {background-image: url(paper.gif); background-repeat: repeat-y;}

/* This is the outline round the main forum tables */
.forumline	{ background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* Main table cell colours and backgrounds */
td.row1	{ background-color: {T_TR_COLOR1}; }
td.row2	{ background-color: {T_TR_COLOR2}; }
td.row3	{ background-color: #efefef; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
		background-color: {T_TD_COLOR2};
		background-image: url(templates/subSilver/images/{T_TH_CLASS3});
		background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th	{
	color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold; 
	background-color: {T_BODY_LINK}; height: 25px;
	background-image: url(templates/subSilver/images/{T_TH_CLASS2});
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
			background-image: url(templates/subSilver/images/{T_TH_CLASS1});
			background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
	height: 29px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
	font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
	background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle	{
	font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
	text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gengray { font-size : {T_FONTSIZE2}px; color: #c6c6c6;}
.genwhite { font-size : {T_FONTSIZE2}px; color: #ffffff; text-decoration: none; font-weight: bold;}
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu		{ text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle		{ text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink 	{ text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav			{ text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover		{ text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2	{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover	{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails		{ font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
	.postbody { font-size : {T_FONTSIZE3}px; line-height: 24px}
a.postlink:link	{ text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code { 
	font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
	font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright		{ font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright		{ color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
	color : {T_BODY_TEXT};
	font: normal {T_FONTSIZE2}px {T_FONTFACE1};
	border-color : {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : {T_TR_COLOR1};
	color : {T_BODY_TEXT};
	font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
	background-color : {T_TD_COLOR1};
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : {T_TD_COLOR1};
	font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/subSilver/formIE.css"); 
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->

</script>
<!-- EN
  • 2 Contributors
  • 6 Replies
  • 222 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by MrScruff

Dani AI

Generated

The posted snippet shows a concrete markup problem: the outer table is not closed — the last line is <table> instead of </table>. Browsers recover from broken HTML in different ways; Firefox often repairs the DOM differently than Internet Explorer, so mis-nested or unclosed tags routinely produce layout/padding differences between the two. Fixing that mismatched tag and re-validating the page is the most likely quick fix (and explains why restructuring the tables, as did, resolved the issue).

A couple of practical, non-speculative points that complement ’s advice: cellpadding is a legacy attribute that applies to all sides, so it cannot target the left only. To add left-only space use a cell-specific rule instead of altering the whole table. For example:

<td class="menu-cell"> ... </td>

.menu-cell {
  padding-left: 40px;
}

Additional troubleshooting tips and cautions: ensure a standards DOCTYPE so browsers use the same box model; run the page through an HTML validator to catch unclosed tags and other syntax errors; use the browser inspector to view computed styles and see which rule wins (specificity/cascade matters); avoid inline attributes in favor of classes on the TD or inner container; and prefer CSS layout over tables for non-tabular content. ’s point about the cascade is key — make cell-level rules more specific if the table or outer classes are overwriting them.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

In general, CSS spacing issues can be resolved by specifying both the "padding" and "margin" properties of all the affected elements.

Tables have their own properties... try setting "cellpadding".

Member Avatar for MrScruff

Ah taking of cellpadding - I've tried that and it works but I've found no way of specifying that it only pads the left hand side... any ideas if theres a way to define it?

Member Avatar for MrScruff

So theres no way of defining the cellpadding attribute to pad from the left. So back to square one. I wonder why this table is causing trouble when the rest are fine?

Member Avatar for tgreer

CSS attributes "cascade", from least-specific to most-specific. You are also mixing inline attributes with CSS class definitions.

In any given TD for your table, you'll get a "combined" or "derived" style based on the inline attributes, the "overbodyline" class, and the "stand" class. Any attributes you've left undefined (such as "margin") will get whatever default the browser uses.

Is the data in your table really tabular? Are you actually presenting a "table" of data? If not, then consider using DIVs, SPANs, and CSS to control appearance and flow. It will be much simpler to troubleshoot these issues if you didn't mix tables and CSS.

Member Avatar for MrScruff

I restructured my tables and got it fixed... yay!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.