|
HTML - Ie8 Vs Firefox Layout Boggle
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>
Similar TutorialsHello 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. 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 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 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. 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! 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 pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place; <img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" / inside of a paragraph in a row of a table. I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try? I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html. Any information anyone could givee me would be REALLY appreciated! Thank you. this is the way it looks right now: http://christoffer.wicb.ots.dk/byrummet/ but i want it to look like this: also with the rounded cornors but i have tryed lot of things but cant get it to work can u help me?? I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up: Is that possible? I've tried various things but no luck yet. Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm How would I go about laying this site out similar to this site? I don't want the bubble text in the blue banner, I want to leave that as it is on my site. Thanks for any help! Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. I have this gif layout http://i21.tinypic.com/140dn5l.jpg But how Do i turn it into a website or like write stuff on it with html? Please help I can do a bit of html Hey guys, I created a webpage with a some pictures and roll over images. The page turned out perfectly well, except when i minimize the browser size. All the images from the right push over to the left depending on the size of the browser. Why does this happen ? Thnx in advance !! Is it possible for me to upload a picture of my template I sketched and you guys tell me what I need to do in order to accomplish this? http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. |
|||||||