CSS - Autostretch/layout Probs In Firefox/safari/ie5 Mac?
Hi people
I have been developing a new cms system www.spindogs.co.uk The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length? I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either? Can anyone help me please!!!! Similar TutorialsHi, I'm having problems with FireFox (or rather it's having problems with my coding). If you go to he http://jigsaw.w3.org/css-validator/...&usermedium=all It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon. View course for html, but the css code is in the validation link, Any help would be great! Thanks It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari. hangemhightaxidermy.com/construction_slides2.htm I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space. If you view the landscape tab you will see what it looks like with both lists and no table. yikes! My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point. I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them. EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing When I do this, it is centered on Firefox: Code: <style type="text/css"> <!-- body { background-image: url(background.gif); background-repeat: repeat-x; background-attachment:fixed; background-color: #000000; } #toptable { position: fixed; top: 0; height: 140px; bottom: auto; z-index: 2; text-align: center; margin-left: auto; margin-right: auto; } #encapsule { margin-left: auto; margin-right: auto; } #centered { text-align: center; } #centered table { margin: 0 auto; text-align: auto; } #bottable { position: relative; margin-left: auto; margin-right: auto; top: 140px; z-index:1; } --> </style></head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="centered" id="encapsule"> <table width="720" border="0" cellpadding="0" cellspacing="0" id="encase"> <tr> <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable"> <tr> <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td> <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td> </tr> <tr> <td><img src="images/index_03.gif" width="47" height="31" alt=""></td> <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td> <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td> <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td> <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td> <td><img src="images/index_08.gif" width="230" height="31" alt=""></td> </tr> <tr> <td><img src="images/spacer.gif" width="47" height="1" alt=""></td> <td><img src="images/spacer.gif" width="102" height="1" alt=""></td> <td><img src="images/spacer.gif" width="92" height="1" alt=""></td> <td><img src="images/spacer.gif" width="104" height="1" alt=""></td> <td><img src="images/spacer.gif" width="15" height="1" alt=""></td> <td><img src="images/spacer.gif" width="130" height="1" alt=""></td> <td><img src="images/spacer.gif" width="230" height="1" alt=""></td> </tr> </table></td> </tr> </table></td> </tr> </table> </div> When I do the following, it centers it on Safari: Code: <style type="text/css"> <!-- body { background-image: url(background.gif); background-repeat: repeat-x; background-attachment:fixed; background-color: #000000; } #toptable { position: fixed; top: 0; height: 140px; bottom: auto; z-index: 2; } #encase { position: relative; margin-left: auto; margin-right: auto; } #bottable { position: relative; margin-left: auto; margin-right: auto; top: 140px; z-index:1; } --> </style></head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="720" border="0" cellpadding="0" cellspacing="0" id="encase"> <tr> <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable"> <tr> <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td> <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td> </tr> <tr> <td><img src="images/index_03.gif" width="47" height="31" alt=""></td> <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td> <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td> <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td> <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td> <td><img src="images/index_08.gif" width="230" height="31" alt=""></td> </tr> <tr> <td><img src="images/spacer.gif" width="47" height="1" alt=""></td> <td><img src="images/spacer.gif" width="102" height="1" alt=""></td> <td><img src="images/spacer.gif" width="92" height="1" alt=""></td> <td><img src="images/spacer.gif" width="104" height="1" alt=""></td> <td><img src="images/spacer.gif" width="15" height="1" alt=""></td> <td><img src="images/spacer.gif" width="130" height="1" alt=""></td> <td><img src="images/spacer.gif" width="230" height="1" alt=""></td> </tr> </table></td> </tr> </table></td> </tr> </table> Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks! EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing i have a page that changes size depending on what is inside it... but i want to set a default size, and if the data goes over that default size, i then want it to autostretch... i think IE will do this... but Firefox will not, it just keeps the set height, and flows the data outside of the div container On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php Thanks, -Sam Hi all, I was wondering if someone could help me out. I have two divs on top of each other: 1 is a menu, 1 is a grid. In IE, the grid is displayed directly below the menu. However, when I view the page in Safari or Firefox, the grid is displayed below and to the right of the menu. See screenshots I have also included my HTML and CSS below. Thanks for your help! Code: /* Submenu */ .submenu{height:32px;background:url(../images/submenu_bg.jpg);border-top:1px solid #ccc; width:105%; } .submenu a:active,.submenu a:focus{text-decoration:underline;} .submenu ul{float:left;z-index:19; } .submenu ul li ul{position:absolute;margin-top:29px;z-index:98;left:-999em;background-color:#f5f5f5;display:block;width:150px;} .submenu li{float:left;list-style:none;background:url(../images/submenu_divider.gif) no-repeat right top;z-index:20;} .submenu li a{color:#000000;text-decoration:none;font-size:10px;padding:7px 15px 7px 15px;display:block;font-weight:bold;font-family:Geneva, Arial, Helvetica, sans-serif;} .submenu li a:hover{background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;} .submenu li li a{color:#000000;text-decoration:underline;background:#F8F8F8;border-bottom:1px solid #CCC;border-right:0;display:block;width:120px;text-decoration:none;font-weight:normal;background-image:none;} .submenu li li a:hover{color:#333;background-color:#f3f3f3;display:block;width:120px;border-bottom:1px solid #CCC;border-right:0;background-image:none;} .submenu .active-menu ul{border-left:1px solid #CCC;border-right:1px solid #CCC;} .submenu .active-menu{color:#FFF;text-decoration:none;background:#f5f5f5 url(../images/submenu_divider.gif) no-repeat top right;} .submenu .active-menu ul li a:hover{text-decoration:underline;border-right:0;background:#fff url(../images/submenu-li-li-hover.gif) repeat-x top;color:#535353;} .grid_maindiv { position: relative; border: 1px solid #cbc7b8; overflow: hidden; width: 105%; font-family: verdana,arial; } .grid_table { background-color: white; width: 100%; font-size: 10pt; } .grid_table_header { background-image: url('../media/header.png'); height: 27px; color: white; font-weight: bold; font-size: 14pt; } .grid_table_resize_row { background-image: url('../media/resize.gif'); width: 2px; margin: 0px; } .grid_table_header_row { background-color: #EBEADB; font-weight: bold; cursor:pointer; padding-left: 5px; padding-bottom: 0px; position: relative; height: 18px; overflow: hidden; font-size: 10px; cursor:pointer; border-bottom:2px solid #cbc7b8; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; margin-bottom: 0px; background-image: url('../media/column.png'); } .grid_table_header_row_hover { font-weight: bold; cursor:pointer; padding-left: 5px; padding-bottom: 0px; position: relative; height: 18px; overflow: hidden; font-size: 10px; cursor:pointer; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; margin-bottom: 0px; border-bottom:2px solid #f9b119; background-color: #FAF9F4; background-image: url('../media/column_on.png'); } .grid_column_resize { cursor: e-resize; width: 2px; background-color: #cbc7b8; border-bottom:2px solid #cbc7b8; padding-bottom: 0px; margin-bottom: 0px; } .grid_table_row_uneven { background-color: #EBEADB; } .grid_footer { background-color: #f9f9f9; height: 20px; color: #616161; } .grid_table_cell { padding-left: 2px; position: relative; border-bottom: 1px solid lightgray; height: 28px; overflow: hidden; margin: 0px; font-size: 10px; } Code: <body onmouseup="SetMouseDown(false);" topmargin="2"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="50%"> <FONT SIZE="-1" FACE="Arial"><A HREF="http://www.itsect.com/" CLASS="topnav">Home</A> <B> <A CLASS="topnav">text</A></B> <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">Account</A> <A HREF="http://www.itsect.com/support/" CLASS="topnav">Help</A></FONT></TD> <TD WIDTH="50%"> <P ALIGN=RIGHT><B><FONT SIZE="-1" FACE="Arial"><a CLASS="topnav">john</a></FONT></B><FONT SIZE="-1" FACE="Arial"> | <A HREF="https://secure.itsect.com/members/?_page=account:account" CLASS="topnav">My Account</A> | <A HREF="http://www.itsect.com/members/?_page=account:account&_logout=Y" CLASS="topnav">Logout</A></FONT></TD> </TR> </TABLE> <HR SIZE=1 COLOR="#000000" WIDTH="100%"> <a href="view.php"><img src="images/ss_logo.gif" border="0" height="39" width="243"></a> <br> <div class="submenu"> <ul> <li><a href="view.php">Show All</a> </li> <li><a href="view.php?trash=1">View Trash</a> </li> <li><a href="http://www.itsect.com/engine/filterpop.php" title="SiteSnipe - Create and View Filters" onclick="return GB_show('SiteSnipe - Create and View Filters', this.href,500,600)">Create/View Filters</a> </li> <li><a href="http://www.itsect.com/engine/reportspop.php" title="SiteSnipe - Schedule Reports" onclick="return GB_show('SiteSnipe - Schedule Reports', this.href,500,600)">Schedule Reports</a> </li> <li><a style="color: #000080; text-decoration: none;">Viewing: All Listings</a></li> <form action="view.php" method="post"> <li><a>Quick Search: <input type="text" name="srch" value="" CLASS="frm2"> <input type="image" src="images/go.gif" name="go" border="0" ALIGN="MIDDLE"></a> </li> </form> </ul> </div> <div class='grid_maindiv' id="grid" width=100%> GRID </div> Still learning CSS and trying to position simple text inside a layer on my clients site: The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox. What am I doing wrong here? Go to : http://www.fractiousmusic.com At the bottom left corner I am trying to position the Steady Systems text. IE - looks fine Firefox - slightly positioned to the right Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong. Please view source and let me know if its a code error. Thanks! Daniel Greetings Well, what can I say. I'm a PC. I've been building these websites and have been validating them and all, and look great in IE 6 & 7. But when I finally get around to downloading the latest version (3.2) of Safari and Firefox, for some reason my background-color doesn't work right. Here's the site: http://www.freshrod.com/maryville/maryvillemo.html Have tried googling it, but no real answers yet. Anyone experience this before? Hi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css Code: <!--[if IE]>QU <link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css" type="text/css"> <![endif]--> Here is the menu system: Code: menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+ '<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+ '<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+ '<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+ '<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+ '<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+ '<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+ '</li></ul></li></ul></div>'; (It rests inside of a javascript function) and here is the CSS: Code: /**************** menu coding *****************/ #menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;} #menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; } #menu a, #menu h2 { border-bottom: 1px solid #c0c0c0; font-family: helvetica, arial, verdana, sans-serif; display: block; } /*#menu h2 { color: #fff; background: #000; }*/ #menu a { color: #f2f2f2; background: #555555; text-decoration: none;} #menu a:hover { color: #f2f2f2; background: #8b8b8b; } #menu li {position: relative;} #menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;} div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} Any help with this is greatly appreciated. Thanks. I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon. 1. I have a question about scroll-bars, how are they implemented to be translucient? 2. How can I make <DIV>'s auto-stretch to whatever is in them? 3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)? 4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread). Thanks, -Sam Hello, I'm trying to make a autostrech page with CSS. I'm having a problem where a DIV jumps down a line instead of compressing. Here is a link to the problem page: http://www.nexpost.net/community/te...rall_header.htm Try resizeing it in your browser. Has anyone had a similar problem? Any fixes? Thanks for any help. You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code: <li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li> <li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li> <li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li> And the CSS Alignment: Code: #ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;} #ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;} #BackHigh {left: 550px; top: 101px; width:141px; height:9px;} Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Quest Sports Medicine</title> <link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .center-wrap p { font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #000; font-size: 30px; line-height: 35px; padding: 0px; float: left; margin-top: 15px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap h2 { font-family: Arial, Helvetica, sans-serif; font-size: 66px; font-weight: bold; color: #942610; text-align: center; line-height: 64px; margin-top: 83px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap img { margin-top: 47px; margin-right: 0px; margin-bottom: 0px; margin-left: 248px; } } --> </style> </head> <body> <div class="all-wrap"> <div class="center-wrap"> <h2>NEW WEBSITE<br /> COMING SOON</br></h2> <p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br /> or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p> <img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" /> </img></div> </div> </body> </html> Any thoughts on what I need to change? Thank you. Hi all, My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place! If anyone would be kind enough to view: cavendish-cs.co.uk/beta/ You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look Any help greatly appreciated Thanks Craig So, here's what I've got: http://www.anthonycarboni.com The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari. Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS: Code: body { color: #FFFFFF; background-color: #000000; font-family: 'ArialMT', 'Arial', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 19px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; opacity: 1.00; padding-bottom: 0px; padding-top: 0px; text-align: center; text-decoration: none; text-indent: 0px; text-transform: none; min-width: 800px; } .main{ background-color: #202020; width: 800px; margin-left: auto; margin-right: auto; text-align: left; } .header{ height: 50px; background-image: url('images/header.jpg'); background-repeat: repeat; } p.headline { font-size: 32px; font-weight: bold; text-transform: uppercase; text-align: center; letter-spacing: 0.8em; vertical-align: middle; } And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated. Thanks! http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. Hello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. |