|
HTML - Troubles With Design Layout In Firefox And Opera
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 Similar TutorialsIm not so good with HTML or CSS. Can someone please help me make this layout? I will put in the contents myself I just need some div type layout. Can anyone please help me? =( . I just need the HTML file and CSS and I will use it as a template for my other pages. Thank you There's something wrong with the tables on the site I'm currently working on.. There's no errors of any kind, but they're acting kind of odd.. I tried to make the code as clean as possible, but since this is a dynamic page, that isn't always easy. In Firefox i get a gap from time to time in the cell background of the page. But if i try to update it gets fixed. In Opera it stays like this all the time Here's a link to the page http://svolvar-jff.net/new/index.php?side=aktiviteter&id=12 I just started working on creating a website but am having trouble with the navigation on the left hand side. Here is the site: http://www.infinetwebsolutions.com/ The problem is when you go to the "Contact" page and the "About Us" pages the navigation buttons on the left hand side get moved around and don't stay put. I know the reason that it is getting moved around on those two pages alone are because the text is much longer on those two pages (in the right hand table). That text is in a separate table though, so I don't know why it has any impact to the table structure on the left. I don't know if I'm providing enough info here to get any help, so please let me know if I need to give more. Thanks in advance! Here is some of the code if this helps: Code: <tr>
<th height="55" valign="middle" scope="row"><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Images/nav_bar/contact_selected.jpg',1)"><img src="Images/nav_bar/contact.jpg" name="Image13" width="137" height="41" border="0" id="Image13" /></a></th>
<th width="24" valign="middle" scope="row"> </th>
</tr>
<tr>
<th height="53" valign="middle" scope="row"><a href="about.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/nav_bar/about_us_selected.jpg',1)"><img src="Images/nav_bar/about_us.jpg" name="Image14" width="137" height="41" border="0" id="Image14" /></a></th>
<th width="24" valign="middle" scope="row"> </th>
</tr>
<tr>
<th height="53" valign="middle" scope="row"><a href="clients.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','Images/nav_bar/clients_selected.jpg',1)"><img src="Images/nav_bar/clients.jpg" name="Image16" width="137" height="41" border="0" id="Image16" /></a></th>
<th width="24" valign="middle" scope="row"> </th>
</tr>
Hello, everybody! I have a problem. This page: http://friends21.com/index.php/publi.../name_joecool/ displays properly in Opera and Firefox, but wrong in IE. I mean in IE for some reason header and footer are aligned left, while in Opera and Firefox it stays centered as it must be. On this site users are allowed to use html code for their profiles (like for example myspace templates). So this user inserted some code that moves headers to the left. (compare with other users: http://friends21.com/index.php/publi...name_drewness/ http://friends21.com/index.php/publi...administrator/) But I couldn't find what exactly in that code moves header/footer to the left and why it does so only in IE but not in Opera and Firefox. Anybody knows? Your help is very much appreciated. Thank you all in advance. Could anyone please help me? I created a login form. And when it is alone on a web page it displays properly in all browsers: IE , Opera and Firefox: http://www.gpftt.com/a/html/ But when I insert it into a html template it remains good in IE but becomes wrong in Opera and Firefox: http://www.gpftt.com/a/html/ind.html I have tried everything I could - html and css editing. I removed all styles from the web page but it still remains wrong. I spent a whole day over it and still couldn't get it working. Can anybody tell me wtf??? Code: <object height="50%" width="50%" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="AutoStart" value="1" /> <param name="FileName" value="http://localhost:8000" /> </object> i am streaming music and i want to put it into a website. but i have no clue how to make it work with opera or firefox. the above code works perfectly with IE. so is there a special trick that i need to do? So we have this old website that we're updating and in our updates we've found that the text will now run over the margins (into our pretty white space). We don't want it to pass the blue tab that says "Contact". Any ideas? http://www.carlsonbldgservices.com Also how can I remove the underline in "Click to Enter"? Ok, so i worked very hard for about 4 hours to make my page valid (click). Now, i worked out everything to work in firefox and safari and then installed opera and it looks fine in that, as well as in mobile safari (for iPod Touch). But, believe it or not, when i try it in IE, everything is completely messed up. I am extremely tired of me having to go the extra mile because the idiots behind IE dont know how to make a fricken browser. Anyways, with the rant out of the way, can anyone help me fix this up? any tips or ideas on what is causing this? http://Flysinger.com thanks, -ajp Hello! I am so confused. I have built this page and it looks great in Firefox! But in Explorer 6 the border, my css container, is bigger than the table I have built to organize my information. I was wondering if someone would take a look at the code and help me identify what I might have done wrong. Here is the site address: https://maxwho.com/mm5/merchant.mvc?...S&Store_Code=M The CSS is embedded in the page so if you view source, you can see the code. Ok I need to take things like this forum: http://lmiinc.com/forum/ http://lmiinc.com/forum/calendar.php And make it active on the new site I'm building for LMI. So what files exactly do I need to copy to the new directory & then reference as a link in my navigation bar in all of my .html files? 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. 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>
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. 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 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 ya'll... I've been having trouble with this site showing up in IE6-7 correctly and don't know how to fix it. View in FF or Safari to see how it's supposed to look. Any advice is much appreciated. Click here if more information is needed, don't be afraid to ask. So here's my problem, I am using a combination of div tags and tables to center my content. However, the blank space in tables overlap the content of other tables so I cannot click content in those tables, I cannot just use a z index since both tables have clickable content in them and whichever one has the lower z index becomes unusable. So my code is something along the lines of. Code: <div style="position: absolute; width: 98%; z-index: 1;" align="center"> <table width="905" height="600"> <tr> <td width="300"> this is where I have content with links </td> <td> </td> </tr> </table> </div> and then to align something on the other side of it I put Code: <div style="position: absolute; width: 98%; z-index: 1;" align="center"> <table width="905" height="600"> <tr> <td> </td> <td width="160"> This is where I have an ad </td> </tr> </table> </div> I tried wrapping the ad in another div tag and giving it a higher z index hoping that it would allow just the ad to pop out (rather than the whole table) but unfortunately it wasn't that easy for me. If anyone can help me solve this please let me know, the website it is currently uploaded on is www.docoden.com as you can see the ad on the right is not capable of being clicked (please do not try to click it just hover your mouse over it since that would violate the TOS) at least not if it's displaying text ads, for some reason image ads are still working for me perhaps due to the use of flash. If anyone can give me any help on this please do. Note: I did not stack them all in a single table because that tends to cause alignment problems from browser to browser, so if your advice is to just make it all a single table then that doesn't help me. If you can explain a simpler way for me to do this using div tags though then that may be appreciated. I apologize for the slightly sloppy code, I am very new to web development. |
|||||||