|
HTML - Table Layout Error In Firefox..perfect In Ie
Hi I am very new to website design and html code therefore I cannot spot what may be a very simple error in my webpage code.
The page in question is http://www.stephanieholmes.co.uk/videos.html I have made the page in dreamweaver. The content is layed out in a table 7x8 with the two outer column's rows merged to contain the left and right floral border. However, in Firefox the centre columns are displaced vertically, but this problem does not occur in IE which confuses me. Please help! Similar Tutorialshttp://recwar.exofire.net/ i know the code is horrible, i used a mix of MS word, frontpage, and dreamweaver, so please dont bite my head off on that, this post is simply about a crossbrowser layout issue. I was able to position everything the right way in dreamweaver. I got a few screenshots from http://browsershots.org/ and its showing completely messed up in ie6, and slightly wonky in ie7 & ie8. the main problem is the text/image in the middle is somehow ending up in the bottom right corner of the page in IE. Also ie6 doesnt seem to like the transparent background on my title/banner/logo. Can anyone figure out a way to at least get the text box in the right spot for IE? So I found this perfect layout my mathew taylor and Im dissecting it to understand the layout and css. My first questions off the bat are, how does he get the links at the top to be indented? I cant see where he placed the command so that their is an inch of indent and then the links start. Also, how does he make it so the links at the top intersect with a black line the spans the header? I really dont see this in the html where the black line is. And lastly, if i want to create a banner for my website in the header how do i go about doing that in the space above the links and spanning the header. I really want to create a clean title in photoshop and place it there but I dont know what dimension width and heighth to use. Thanks http://matthewjamestaylor.com/blog/perfect-3-column.htm Hi, I'm having trouble getting a few things to behave in IE. Please look at this page [the links don't work, coz none of the other pages are on the server yet]: http://napftest.org/ 1 -- On the upper left hand side, you'll see a 'Search' box. In FF, it lines up perfecly, it obeys the code which tells it to be in the 'middle' of the cell. But in IE, the search box goes to the 'top' of the cell. 2 -- At the bottom left, you'll see a drop down menu: 'Visit our Sister sites', In FF, the spacing between the text and the drop down is perfect. But in IE, there is an extra high space. Can anyone tell me why these anomolies are occurring. Usually, I've been able to figure out what's causing the difference, but here, I've tried everything, and nothing changes the behavior in IE. Thanks very much as the title suggests my web page just comes out blank when previewed in I.E but works perfectly for firefox. I have run validation tests with no error results so i have no idea what could be causing this. I hand coded my website myself, but whilst working perfectly in IE, there are some problems when viewing it using Firefox. Specifically, the table rows have double-spacings (scroll down to the 'Education' section he www.lombrozo.co.uk/resume.html), and also table borders have a 3D look (a black border to emphasise the shadow), again, this shadow is not visible in IE... Any ideas anyone? Any help would be most appreciated! Hi guys and girls out there on the forum My website has a problem with showing properly in Firefox Here is my url: http://lessons-4-success.com Can you tell me what i can do to get it to show properly like it do in IE ? Thanks much in advance for answers.. Michael Pls excuse the amateur question, but can someone please help me with this IE vs Firefox placement issue? My problem is the vertical positioning of the text and image boxes on the left sidebar in IE (3 groups: 'Calculus 2010', 'Muse 2010', followed by a set of flash image rotations). The layout is ideal in Firefox but there is too much spacing between the three sets in IE (between the Calculus image link and the Muse text, and between the Muse image link and the flash table). Images and code below (trimmed the code to fit this site posting max) - many thanks to anyone willing to help. Images: Code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Gordon International Sidebar</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" charset="iso-8859-1">
<META name="Copyright" content="Gordon_Intl_http://www.gordoninternational.com/">
<link rel="StyleSheet" href="css/common-style.css" type="text/css">
<link rel="StyleSheet" href="css/gray.css" type="text/css">
<link rel="StyleSheet" href="css/gray-menu.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>
<script language="JavaScript" type="text/javascript" src="scroller/scroll.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:active {
color: #FFF;
}
-->
</style></head>
<BODY link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" class="sidebar-background2">
<!-- START CONTENT TABLE -->
<TABLE cellpadding="10" cellspacing="0" border="0" width="368" class="sidebartext"><tr>
<td width="348" align="left" valign="top">
<p><br>
<p>Search Our Site<br>
<script language="JavaScript" type="text/javascript" src="search.js"></script>
<br>
<a>
<p>New Collections!<br>
<br>
<br>
<a href="collection_calculus.htm" target="_parent">Calculus 2010 -</a> </p>
<table width="93" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><img src="picts/swf_crnr_blk_top.jpg" alt="" width="5" height="10" hspace="0" vspace="0" border="0"></td>
<td><img src="picts/swf_brdr_hrzntl_top.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10" hspace="0" vspace="0" border="0"></td>
</tr>
<tr>
<td height="87"><img src="picts/swf_brdr_left_blk.jpg" alt="" width="5" height="87" hspace="0" vspace="0" border="0"></td>
<td height="87" bgcolor="#FFFFFF"><a href="collection_calculus.htm" target="_parent"><img src="picts/price pics/calculus/2010_Calculus_channel_hb_sidebar.jpg" alt="Muse Collection" width="93" height="83" align="absmiddle"></a></td>
<td height="87"><img src="picts/swf_brdr_rght.jpg" alt="" width="8" height="87" hspace="0" vspace="0" border="0"></td>
</tr>
<tr>
<td><img src="picts/swf_crnr_blk_bottom.jpg" alt="" width="5" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_brdr_hrzntl_bottom.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_sqr_rght_bottom.jpg" alt="" width="8" height="10" hspace="0" vspace="0"></td>
</tr>
</table>
<p><br>
<br>
<br>
<br>
<br>
<br>
</p>
<p> </p>
<p><a href="collection_muse.htm" target="_parent">Muse 2010 -</a>
</p>
</p>
<table width="93" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><img src="picts/swf_crnr_blk_top.jpg" alt="" width="5" height="10" hspace="0" vspace="0" border="0"></td>
<td><img src="picts/swf_brdr_hrzntl_top.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10" hspace="0" vspace="0" border="0"></td>
</tr>
<tr>
<td height="87"><img src="picts/swf_brdr_left_blk.jpg" alt="" width="5" height="87" hspace="0" vspace="0" border="0"></td>
<td height="87" bgcolor="#FFFFFF"><a href="collection_muse.htm" target="_parent"><img src="picts/price pics/muse/muse_task_arm_sidebar.jpg" alt="Muse Collection" width="93" height="83" align="absmiddle"></a></td>
<td height="87"><img src="picts/swf_brdr_rght.jpg" alt="" width="8" height="87" hspace="0" vspace="0" border="0"></td>
</tr>
<tr>
<td><img src="picts/swf_crnr_blk_bottom.jpg" alt="" width="5" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_brdr_hrzntl_bottom.jpg" alt="" width="100" height="10" hspace="0" vspace="0"></td>
<td><img src="picts/swf_sqr_rght_bottom.jpg" alt="" width="8" height="10" hspace="0" vspace="0"></td>
</tr>
</table>
<p><br>
</p>
<p> </p>
<p> </p>
<p> </p>
<p><br>
<br>
</p>
<p>
<table width="113" height="265" border="0" align="left" cellpadding="0" cellspacing="0">
<tr bgcolor="#223F83">
<td width="100" height="10" bgcolor="#274082"><img src="picts/swf_crnr_blk_top.jpg" width="5" height="10"></td>
<td width="100" height="10" bgcolor="#274082"><img src="picts/swf_brdr_hrzntl_top.jpg" width="100" height="10"></td>
<td width="100" height="10" bgcolor="#274082"><img src="picts/swf_sqr_rght_top.jpg" alt="" width="8" height="10"></td>
</tr>
<tr>
<td width="100" height="75" bgcolor="#274082"><img src="picts/swf_brdr_left_blk.jpg" width="5" height="75"></td>
<td width="100" height="75" bgcolor="#274082"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100" height="75" hspace="0" vspace="0" align="middle" class="subtitle" id="FlashID2" title="Projects">
<param name="movie" value="flash/quick_projects3.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<param name="SCALE" value="exactfit">
<param name="BGCOLOR" value="#223F83">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="flash/quick_projects3.swf" type="application/x-shockwave-flash" width="100" height="75" hspace="0" vspace="0" align="middle">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<param name="SCALE" value="exactfit">
<param name="BGCOLOR" value="#223F83">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
<td width="100" height="75" bgcolor="#274082"><img src="picts/swf_brdr_rght.jpg" width="8" height="75"></td>
</tr>
<tr bgcolor="#233F80">
<td width="5" height="10"><img src="picts/swf_crnr_blk.jpg" width="5" height="10"></td>
<td width="100" height="10" bgcolor="#274082"><img src="picts/swf_brdr_hrzntl.jpg" width="100" height="10"></td>
<td width="8" height="10" bgcolor="#274082"><img src="picts/swf_sqr_rght.jpg" alt="" width="8" height="10"></td>
</tr>
<tr>
<td width="5" height="75" bgcolor="#274082"><img src="picts/swf_brdr_left_blk.jpg" width="5" height="75"></td>
Hello everyone, The forums here are very helpful and i would like to thank everyone for posting. My trouble is simply when I was designing the website it was done a firefox browser and everything was perfect and in the right place, When I attempted to visit the website in a IE browser the logo is out of place as well as the side navigation, It appears that the side navigation is always below the content to the right of it. http://www.blackwidowinc.com Any help is greatly appreciated. The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! Hello all, I use Internet Explorer 7 which is also the browser I preview my layouts on. I've had problems with my layouts looking like they should on Firefox for the longest time and I think it's time I tried correcting the problem. When I load my blog on Firefox the entry box overlaps with a portion of the image. The entry box's height is also too long on Firefox. I do know that coloured scrollbars don't show up on Firefox so that's not a problem. My main issue is that the basic arrangement of the boxes of my layout is completely messed up on Firefox. Here's the HTML: Quote: <html> <head> <title>o.d.c v41: i am more than you will see.</title> <style type="text/css"> A:link { text-decoration: none; font-weight: bold; color: #924146 } A:visited { text-decoration: none; font-weight: bold; color: #924146 } A:active { text-decoration: none; color: #000000 } A:hover { text-decoration: line-through; cursor: default; color: #000000 } body {background-color: #E6DDD0; scrollbar-face-color: #E6DDD0; scrollbar-highlight-color: #E6DDD0; scrollbar-3dlight-color: #E6DDD0; scrollbar-shadow-color: #E6DDD0; scrollbar-arrow-color: #E6DDD0; scrollbar-track-color: #E6DDD0; scrollbar-darkshadow-color: #E6DDD0; font-family: tahoma; color: #000000; text-align:justify; margin: 0px; font-size: 8pt;} .entry {position: absolute; top: 80px; left: 163px; width: 514px; height: 481px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 10px; letter-spacing: 0pt; line-height: 9pt; overflow:auto; background-color: #D9B8AE; scrollbar-face-color: #D9B8AE; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #D9B8AE; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #D9B8AE; scrollbar-track-color: #D9B8AE; scrollbar-darkshadow-color: #D9B8AE;} .image {position: absolute; top: 50px; left: 680px; border-left: 0px solid #52191D; border-right: 0px solid #52191D; border-top: 0px solid #52191D; border-bottom: 0px solid #52191D;} .links {position: absolute; top: 50px; left: 163px; width: 514px; height: 10px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 6px; text-align: center; background-color:#D9B8AE;} </style> <script type="text/javascript" src="http://www.haloscan.com/load/tripwires"> </script> </head> <body> <div class="image"> <img src="http://img.photobucket.com/albums/v628/yelen/mewithtext.jpg"> </div> <div class="entry"> <center><font color=#BC6A6F><b><u>%%short_description%%</u></b></font></center> <p align="right"><i>written: %%time%% on %%date%%</i></p> <P> %%entry%% <P><P><P><P> <P align="right"> <font size=1.5><a href="javascript:HaloScan('%%page_name%%');" target="_self"><script type="text/javascript">postCount('%%page_name%%');</script></a></font> <P><P> <p align="center"><a href="%%prev%%">previous entry</a> || <a href="%%next%%">next entry</a> <P><center><hr width=90% noshade color=#000000 HR size="1"></center><P> <b> Previously:</b><br> %%older_entries%%<P> <br> <P align="center"> <!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" --> <script type="text/javascript" language="JavaScript">var site="s13cyelen"</script> <script type="text/javascript" language="JavaScript1.2" src="http://s13.sitemeter.com/js/counter.js?site=s13cyelen"> </script> <noscript> <a href="http://s13.sitemeter.com/stats.asp?site=s13cyelen" target="_top"> <img src="http://s13.sitemeter.com/meter.asp?site=s13cyelen" alt="Site Meter" border=0></a> </noscript> <!-- Copyright (c)2002 Site Meter --> <!--WEBBOT bot="HTMLMarkup" Endspan --> <!-- Begin Nedstat Basic code --> <!-- Title: like i could care --> <!-- URL: http://offence.diaryland.com --> <script language="JavaScript" src="http://m1.nedstatbasic.net/basic.js"> </script> <script language="JavaScript"> <!-- nedstatbasic("ABZB6g7C7XYY5+UwEEa7SkNbtBHg", 0); // --> </script> <noscript> <a target="_blank" href="http://v1.nedstatbasic.net/stats?ABZB6g7C7XYY5+UwEEa7SkNbtBHg"><img src="http://m1.nedstatbasic.net/n?id=ABZB6g7C7XYY5+UwEEa7SkNbtBHg" border="0" nosave width="18" height="18"></a> </noscript> <!-- End Nedstat Basic code --><P> </div> <div class="links"> <a href="http://offence.diaryland.com/index.html">new</a> <a href="http://offence.diaryland.com/older.html">old</a> <a href="http://offence.diaryland.com/bio.html">bio</a> <a href="http://offence.diaryland.com/omake.html">extras</a> <a href="http://offence.diaryland.com/layout.html">layout</a> <a href="http://members.diaryland.com/edit/notes.phtml?user=offence">notes</a> <a href="mailto:yelen.dean14[at]gmail.com">email</a> <a href="http://offence.diaryland.com/poetry.html">poetry</a> <a href="http://www.fanfiction.net/~hisashilovesyelen" target="_blank">fanfiction</a> <a href="http://www.fictionpress.com/~hisashilovesyelen" target="_blank">originals</a> <a href="http://offence.diaryland.com/faveentries.html">favourites</a> <a href="http://www.diaryland.com">host</a> </div> </body> </html> Here's the link to my blog: http://offence.diaryland.com I have VERY basic knowledge of HTML, as I'm sure is obvious. Any help is, therefore, greatly appreciated. Hey Guys I have a problem when viewing my website in firefox. However, It works in opera, safari and Quanta's preview window. I have unwanted gaps underneath buttons images that have rollovers. Wrong: Correct: The code is: Code: <TABLE border="0" cellpadding="0" cellspacing="0">
<TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
<TR><TD><IMG src="images/sidebar.gif"></TD></TR>
<TR><TD> <!-- Home Button -->
<a href=""
onmouseout="document.btn_home.src=btn_home_nm.src"
onmouseover="document.btn_home.src=btn_home_hv.src" >
<img src="images/btn_home_nm.gif" border="0" name="btn_home">
</a>
</TD></TR>
<TR><TD> <!-- Opening Times Button -->
<a href=""
onmouseout="document.btn_opening_times.src=btn_opening_times_nm.src"
onmouseover="document.btn_opening_times.src=btn_opening_times_hv.src">
<img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">
</a>
</TD></TR>
I don't get these gaps on firefox if I remove the a tag like this: Code: <TABLE border="0" cellpadding="0" cellspacing="0">
<TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
<TR><TD><IMG src="images/sidebar.gif"></TD></TR>
<TR><TD> <!-- Home Button -->
<img src="images/btn_home_nm.gif" border="0" name="btn_home">
</TD></TR>
<TR><TD> <!-- Opening Times Button -->
<img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">
</TD></TR>
But then I don't have rollovers Does anyone know why this happens, and why it doesn't happen on opera or safari? Thank you Toshi I am building a web site for one of my friends. The address is www.lawlessbullies.com . I can't get the middle section to remain centered on both Firefox and IE. It looks perfect in IE, but not in Firefox. I'm not sure if I need to edit my html, or the css. Can someone take a look and help me out? i've been trying to find a solution for weeks and this is my last resort. Its probably something small, and easy. I'll post my index.html and my style.css hey guys, i am working for a few hours on my website project (design part), but still don't get it work correctly. This is what it should look like: http://www.jarisch.net/faz/img/4_5.png And this is the current version: http://www.jarisch.net/faz how can i prevent firefox and opera from making spaces between some images as well as from making spaces between the outer images and the borders (top and bottom)? thanks a lot.. amoun Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language well im creating a new website layout but its being an ass...or its just me well its like 5am here in the UK now which is probebly the reason for the problem but ah well i need it sorting asap and i cant work it out. my website is http://www.rharris28.com so you can see for yourself. basicly everything apart from the bar at the bottom should be on one line, but it just wont do it. i refuse to use tables as ive broken that habbit and want to stear clear of tables at all costs. so its all div's and css work. my html is HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mixing Pixels - Internet Services :: Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="verify-v1" content="KY6WP1pcuAyddeAyjc4oFZVeQDE0qbbA1GGcJ2Zgu8Y=" />
</head>
<body>
<div id="background" align="center">
<div id="container" align="left">
<div id="tb">
<div id="tbbg"></div>
<div id="topsep"></div>
<div id="tophome"></div>
<div id="topsep"></div>
<div id="topmap"></div>
<div id="topsep"></div>
<div id="topcontacts"></div>
<div id="topsep"></div>
<div id="searchbg"><b>Search:</b></div>
</div>
<div id="topmenu">
<div id="topmenubg">Home</div>
<div id="topmenusep"></div>
<div id="topmenubg">News</div>
<div id="topmenusep"></div>
<div id="topmenubg">Downloads</div>
<div id="topmenusep"></div>
<div id="topmenubg">Search</div>
<div id="topmenusep"></div>
<div id="topmenubgend">Services</div>
</div>
</div>
</div>
</body>
</html>
and my CSS is Code: * {
margin: 0;
padding: 0;
}
#background {
background-color:#01557C;
height: 100%;
width: 100%;
}
#container {
background-color:#FFFFFF;
width: 759px;
height:500px;
}
#tbbg {
background-image:url(/images/main01.jpg);
width:256px;
height:41px;
}
#tb {
float:left;
width:759px;
}
#tophome {
background-image:url(images/but_home.gif);
width:74px;
height:41px;
}
#topmap {
background-image:url(images/but_site_map.gif);
width:94px;
height:41px;
}
#topcontacts {
background-image:url(images/but_contacts.gif);
width:96px;
height:41px;
}
#topsep {
background-image:url(images/separator.gif);
width:2px;
height:41px;
}
#searchbg {
width: 231px;
height: 41px;
background-image:url(images/fon01.gif);
}
#topmenu {
width:759px;
}
#topmenubg {
background-image:url(images/fon_menu.gif);
width:132px;
height:42px;
float:left;
text-align:center;
}
#topmenubgend {
background-image:url(images/fon_menu.gif);
width:135px;
height:42px;
float:left;
}
#topmenusep {
background-image:url(images/e_menu.gif);
width:24px;
height:42px;
float:left;
}
please help...many thanks SEE IMAGE How can I get these two tables on the same row? Do they have to be in one whole table altogether? Or can they be separate tables. At the 'mo they're different tables. Thanks Im creating a site using a table based layout. I have one table and many different cells. I also have a lot of different content. The problem I'm having is when I put a picture inside a cell, it screws up the entire layout. It doesn't stay "still", it just affects all the other cells. I always have this problem, yet can't find a solution. It figures it's the easy things that are getting me..lol. For some reason I just can't seem to get the table to match what I am looking for. Could be I am up too late trying to get this to work but if anyone could provide the table code I would need to get the following it would be much appreciated!! I don't need any of the width attributes or anything, just the basic table structure to get this layout!! Thank you in advance for the help!! A crude drawing but hopefully gets the idea across..lol This is pretty basic, i am trying to make a layout using tables to include a header, nav bar, left, main and right columns(tables) and a footer, so far i have this(below), the header and nav bar work ok, after that the tables align to the left out of postion with the header etc, how do i get the left table to be flush with the header and nav bar tables and then the middle table and right tables(cols) to be in the right place??... any help here....? HTML Code: <table width = "80%" border = "1" align = "center"> <tr> <td> Header </td> </tr> <table width = "80%" border = "1" align = "center"> <tr> <td> Nav bar</td> </tr> </table> <!-- i can't get this table to be flush with the header and nav bar tables --> <table width = "20%" border = "1" align = "left"> <tr> <td> Left col </td> </tr> </table> </table> This is what i am trying to achieve, |
|||||||