|
HTML - Newbie - Site Works Fine In Firefox, Not So Fine In Ie
Hi All,
im new here so go easy. this might be an easy answer. i am making this website and am positioning items around the site using div tags. the site looks just how i want it to in Firefox but when i open it in IE it has different sizes everywhere and does not match up. also i have a logo in the upper right of the site. how do i get this to resize when the browser size is changed? here is the sites code. <html> <head> <title>Maroondah Trailers</title> </head> <body BGCOLOR="807a7a"> <div style="background-image:url('pictures/bg.gif'); background-repeat: repeat; position: absolute; left: 0%; top: 0%; width: 16%; height: 97%;"></div> <div style="background-image:url('pictures/bg.gif'); background-repeat: repeat; position: absolute; left: 84%; top: 0px; width: 16%; height: 97%;"></div> <div style="background-color: White; position: absolute; left: 16%; top: 15%; width: 68%; height: 82%;"></div> <div style="background-color: ff3600; color: white; position: absolute; left: 16%; top: 15%; width: 68%; height: 4%;"></div> <div style="position: absolute; left: 60%; top: 3%; width: 30%; height: 40%;"><img src="pictures\logo2.gif"></div> <div style="background-color: black; position: absolute; left: 84%; top: 0%; width: .2%; height: 97%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 0%; width: .2%; height: 97%;"></div> <div style="background-color: black; position: absolute; left: 0%; top: 97%; width: 100%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 0%; top: 97%; width: 100%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 15%; width: 68%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 19%; width: 68%; height: .3%;"></div> </body> </html> heres what they both look like thanks alot Matt Similar TutorialsSee http://www.smoli.com I just added the SmoothDivScroll (jQuery add-on) to my page to create scrolling images at the bottom. Unfortunately as a result the table no longer resized correctly to the size of the screen, and the scrolling does not work. This only happens in Firefox, in IE8 everything works as it should. Any idea what is wrong with my code? Many thanks in advance, J. PS: Everything also works fine when previewed from within FrontPage 2k3 (the editor I use to create the page). my problem is ie and its padding, ie has add a 4px padding at the bottom of the of the image but in safari and firefox there is no padding. here is the url so u understand what i mean http://nathanoconnor.co.uk/gilbertelectrical/site/ http://www.yandina.com/JIndex.htm Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like. Open in IE and the last table get overlaid on top of the previous table. What sort of things can cause that? Additional (unrelated I think) problem, IE is not accessing cookies but others are fine. What can cause that? I've been customising templates on a CMS over time, mainly using a Mac for the editing side of things, but then checking on a PC with different browsers, of course. I carried out a few changes a while back and things looked fine in Safari, but not so fine when I checked them on IE7. An example: http://www.ukprwire.com/Detailed/Con...uk_11538.shtml Anyone know why the page is extra wiiiiide in IE, but fine in Safari? I've since checked it with Firefox and its fine with that one too. So my site that i am developing has hit a bit of a snag. In firefox it looks great, however when i switch over to IE i get a big white space. I am wondering if anyone knows how i can correct this white space? http://www.wdwcanada.com/maps.php is the link. Thanks, Hi, Thanks in advance for your help. I'm doing a web page that I would like to be viewed on 1024 resolutions without a horizontal scrollbar. It will contain images that are exactly 980px wide. The problem is that with ie7, as soon as it contains a div or a table, no matter what I do to try to remove all padding,margins,etc.. it adds 2px for each element (I guess 1px for each side). Below is some html as an example of my problem, where I've tried to remove everything I can think of... this works fine in firefox 3 <body style="width:998px;margin-top:0;margin-left:0;margin-right:0;padding:0;"> <div style="width:100%;textalign:center"><table border="0" cellspacing="0" cellpadding="0" style="width:998px;border-collapse:collapse;padding:0;margin:0;border:0;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;">sdfsdfd</tr></td></table><div style="width:100%> </body> Hi I have tried a lot of things and search the internet for hours regarding this matter... My image background doesn't reapeat in Internet explorer however works fine in any other browsers such as google chrome and firefox. Can you please help me get this fixed? I am new to xhtml and css and really it's really frustrating having this kind of problem. Thank you Website Link: www.pjrazon.co.uk/newlayout/index.html screenshots if it helps: CSS: @charset "utf-8"; * { margin: 0px; padding: 0px; } body { background-color: #CCCCCC; } a:link { color: #ffffff; text-decoration: none; } a:visited {text-decoration: none;} a:hover {color: #b23937;} a:active {text-decoration: none;} #wrapper { width: 1151px; margin-right: auto; margin-left: auto; border-right-width: thin; border-left-width: thin; border-right-style: solid; border-left-style: solid; border-right-color: #999999; border-left-color: #999999; } #wrapper #logo { height: 120px; width: 1151px; } #wrapper #navigation { background-image: url(../images/nav.home.gif); height: 32px; } #wrapper #navigation #navlabel { color: #FFFFFF; padding-top: 5px; padding-left: 125px; } #wrapper #navigation #navlabel #nav li { display:block; width:100px; float:left; list-style:none; } #wrapper #header { height: 391px; background-image: url(../images/welcome.jpg); } #wrapper #mainContent { height: 384px; background-image: url(../images/maincontent.jpg); width: 1151px; } #wrapper #bodyArea #footer { background-image: url(../images/footer.jpg); height: 73px; clear: both; } #wrapper #bodyArea { background: url(../images/bg_bodyarea.jpg) repeat-y; } #wrapper #bodyArea #mainContent #content { display:block; width:400px; float:left; } #wrapper #bodyArea #mainContent #contentwrapper { padding-left: 140px; padding-top: 70px; } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Perfect Vision</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo"><img src="images/header.jpg" alt="logo" /></div> <div id="navigation"> <div id="navlabel"> <ul id="nav"> <li><a href="homepage.html">Home</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="header"></div> <div id="bodyArea"> <div id="mainContent"> <div id="contentwrapper"> <div id="content"> <p>August 10 2010</p> <p> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p> <p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p> <p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p> </div> </div> </div> <div id="footer"></div> </div> </div> </body> </html> My site, for my local church looked fine in IE7. I updated to IE8 (what was I thinking) and my site now looks hideous. I had DIV headers and footers and these have expanded to twice their height. I've tried various fixes to the CCS style sheet but I feel that the changes I'm making are clumsy and not really dealing with whatever underlying change is present in IE8. If I choose the icon for 'older coded pages' provide at the top of IE8, then the site looks okay again. I don't want to hack away at the CSS blindly - any thoughts, links to site and CSS supplied. BTW, the behaviour of IE8 is similar to how the site looks on Firefox. http://www.bethanyec.co.uk http://www.bethanyec.co.uk/style/style.css Any advice would be really appreciated. 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>
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 I have a website hosted at discoverybyte.uuuq.com, and it is working great, except that the heading is displayed weird in IE8. It works fine on Firefox 3.5 though. In IE8 the heading menu is indented when I prefer it not to be. See the attached images for more help. Please note that as of this posting the code is on my website shown above. Any help would be appreciated. Hi the page in question is this one Removed, as I dont think advertising is allowed?, so i removed the link For me it renders perfectly in Firefox 3 However i noticed that in IE7, dont know about IE6 it sticks the whole page on the left, as if there were no formatting or .css file, this cant be true because Firefox renders it fine and the text is all in relation ot the .css file So please can someone help me with this, it is in PHP, but only a line really Chris 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 Code: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
<!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Announcements</title>
</head>
<body border="0" width="100%" height="912" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" bgcolor="#0000FF">
<tr>
<td colspan="3" height="184">
<table border="0" width="85%" cellpadding="0" height="665" cellspacing="0">
<tr>
<td height="144" width="98%" colspan="3" align="center" bgcolor="#0000FF">
<img border="0" src="images/BannerGMSN.jpg" width="100%" height="144"></td>
</tr>
<tr>
<td height="36" colspan="3" align="center" bordercolor="#FFFFFF">
<p align="center">
<font face="arial" color="#FFFFFF" size="4">
<b><a href="index.htm" style="text-decoration: none">Home</a>
<a href="Announcements.htm" style="text-decoration: none">
Announcements</a>
<a href="Athletics&Activities.htm" style="text-decoration: none">
Athletics & Activities</a>
<a href="GMSN_Information.htm" style="text-decoration: none">
GMSN Information</a>
<a href="https://www.geneva304.org/departments/curriculum_instruction/frameworksformiddleschool.asp" style="text-decoration: none">
Curriculum</a></b> </font></td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top">
<!--[if pub]><xml>
<b:ColorScheme type="OplSccm" oty="92" oh="279">
<b:Rgecp type="OplEcp" priv="214">
<b:OplEcp type="OplEcp" priv="411">
</b:OplEcp></b:Rgecp></b:ColorScheme><![if pub11]><xml>
<b:Page type="OplPd" oty="67" oh="265">
<b:PtlvOrigin type="OplPt" priv="511">
<b:Xl>22860000</b:Xl>
<b:Yl>22860000</b:Yl>
</b:PtlvOrigin>
<b:Oid priv="605">(`@`````````</b:Oid>
<b:OhoplWebPageProps priv="90E">266</b:OhoplWebPageProps>
<b:OhpdMaster priv="D0D">263</b:OhpdMaster>
<b:PgtType priv="1004">5</b:PgtType>
<b:PtlvOriginEx type="OplPt" priv="1111">
<b:Xl>110185200</b:Xl>
<b:Yl>110185200</b:Yl>
</b:PtlvOriginEx>
</b:Page>
</xml><style><!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style> <![if pub11]><img border="0" src="images/viking.jpg" width="116" height="142"><br>
<font color="#FFFFFF" face="Arial">
<span style="font-weight: 700; background-color: #FFFFFF">
</span>
</font><br>
</td>
<td width="56%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p style="margin-top: 0; margin-bottom: 0"><br>
<span style="font-weight: 700">
<font face="Arial" color="#0000FF" size="6">Announcements</font></span></td>
<td width="28%" bgcolor="#FFFFFF" align="center" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p> </td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top" height="348">
<div style="position: absolute; top: 591px; left: 41px; width: 104px; height: 101px; z-index: 1">
<p style="line-height: 150%; margin-top: 6px; margin-bottom: 6px"> <a href="http://www.geneva304.org/">
<img border="0" src="images/Announ1.jpg" width="104" height="101"></a></div>
</td>
</tr>
</table>
</body>
</html>
http://www.ptacnik.com/index102.html When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated. http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1. http://ptacnik.com/about101.html http://ptacnik.com/design.html http://ptacnik.com/illustration.html Hello, for one site only, IE6 fails to prompt to save password for a Login Form. This is a new site. IE6 *does* prompt for other sites (e.g. amazon.com sign-on) The IE autocomplete settings are set to prompt in the usual way. I've tried clearing all cookies/cache etc. There are no autocomplete disabled/off settings in the page. What is strange is that Firefox does prompt to save password for site for the problematic page, as I would expect IE to. The only thing that's maybe a bit unusual is that the INPUT name="..." in the Form contains unusual chars such as ^ and !. But i wouldnt have though that was a problem (?). Any ideas why the save password prompt is not appearing for this one site? thanks. Uploaded with ImageShack.us My website is www.tuckermatthewsphoto.com This is what my side menu looks like when I open it in Firefox. Note the box to the left of "automotive". It's a link to the home page, just like the "Tucker Matthews Photography" image. I've tried ironing it out all day, caved in and asked for help. In safari the "Automotive" link is in line with the others. Please help! Check my source code and my CSS out! This is killing me! Hey all, I'm new here and I have a website i designed. The page appears fine when i go to IE but it's all messed up when I view it using Mozilla. I'm stumped. This is my website: www.secondhandoffroad.com Thanks, Hello folks. I have been trying out this site as a beta for a hockey team. I am developing a site and have an issue with ONE page in particular. Every other page looks great! http://web.mac.com/chris.ducasse/force_beta/staff.html That is the culprit. I have looked over the source code, and cannot find anything that would cause it. What happens, if you don't see it, is that the page does not take the entire site width, it wraps the text at about 2 inches or so away from the right edge of the page. Any help is appreciated. Also, I got the navigation bar (modified it myself) from Open Source Web Design and want to give the artist credit - where do I do that in HTML code? Thanks again. |
|||||||