|
CSS - Css Causing Problem In 'other' Browsers...
Hi,
Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below: Code: body {
background-color:white;
font-size:x-small;
font:Verdana;
vertical-align:middle;
}
#container{
margin-top:0%;
margin-left:15%;
width:700px;
height:550px;
background-color:#C7E8FD;
z-index:1;
position:absolute;
}
#bottomdetailbar{
width:610px;
height:10px;
z-index:2;
margin-top:446px;
padding:2px;
margin-left:6%;
}
#topbar{
width:700px;
height:56px;
background-color:#3300CC;
z-index:2;
}
#midbar{
width:700px;
height:10px;
background-color:#96D6FF;
z-index:3;
}
#textbar{
width:650px;
height:20px;
z-index:20;
margin:5px;
margin-left:25px;
}
#globe{
width:auto;
height:auto;
margin-top:-51px;
z-index:4;
}
#mapcentretitle{
padding-top:41px;
margin-left:70px;
width:auto;
height:auto;
z-index:5;
}
#imagecontainer{
margin:0px;
margin-right:-50px;
width:460px;
height:400px;
float:right;
z-index:6;
position:static;
margin-top:30px;
}
#imagebox{
width:100px;
height:100px;
margin:3px;
padding:0px;
z-index:7;
text-align:center;
vertical-align:middle;
float:left;
position:relative;
display:table-cell;
}
#leftcontainer{
width:280px;
height:300px;
margin:3px;
margin-top:25px;
z-index:8;
}
#lefttop{
width:260px;
height:80px;
margin:3px;
padding-top:15px;
padding-left:15px;
z-index:9;
float:right;
background-image:url(images/leftopbg.gif);
background-repeat:no-repeat;
}
#leftinfo
{
width:260px;
height:125px;
margin:3px;
z-index:21;
background-image:url(images/information.gif)
}
#leftmiddle{
width:260px;
height:80px;
margin:3px;
z-index:30;
}
#descriptiontext{
margin-top:-555px;
margin-left:390px;
width:300px;
height:100px;
z-index:10;
}
#dropdown{
width:260px;
height:80px;
margin:3px;
z-index:12;
background-image:url(images/dropdown.gif);
background-repeat:no-repeat;
margin-top:0px;
}
#menuwork{
width:260px;
height:80px;
z-index:13;
margin-left:-165px;
margin-top:-410px;
}
Similar TutorialsHi, I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom. I have been toying around for hours but with no success. I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped. The image in question is Code: <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> If you need me to upload the pics I can do that (website down atm hence the code instead of a url) (With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./index.css" media="all" /> <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" /> <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TorqueSRO - FAQ</title> <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/> <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/> <meta name="copyright" content="Copyright TorqueSRO - 2009"/> <meta name="author" content="UrbanGrafix"/> <meta name="Distribution" content="Global"/> <meta name="Rating" content="General"/> <!--[if IE]> <style type="text/css" media="all">.borderitem {border-style:solid;}</style> <![endif]--> </head> <body> <div id="container"> <div id="main"> <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton" alt="TorqueSRO" /></a> <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless" alt="tClientless" /></a> <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton" alt="FAQs" /></a> <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links" alt="Videos" /></a> <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton" alt="Forum" /></a> </div> <div id="ad"> </div> <div id="main1"> <img src="images/mainlogo.jpg" alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg" alt="" name="Main2ndBanner" id="Main2ndBanner" /></div> <div id="Content"> <div id="ContentMain"> <p style="text-align: left"><a href="#a">Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</a></p> <p style="text-align: left"><a href="#b">Q. How do I login multiple accounts?</a></p> <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why did this happen?</a></p> <p style="text-align: left"><a href="#d">Q. How can I make a character a master for every character logged in through tClientless?</a></p> <p style="text-align: left"><a href="#e">Q. I want to delete an alias, how can I do that?</a></p> <p style="text-align: left"><a href="#f">Q. tClientless says the authentication failed and/or cannot connect to the server.</a></p> <p style="text-align: left"><a href="#g">Q. I missed out on the BETA, will I be able to use tClientless?</a></p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</strong><br /> A. Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p> <p style="text-align: left"><br /> <strong><a name="b" id="b"></a>Q. How do I login multiple accounts?</strong><br /> A. Simply type the account information and hit login again, tClientless will handle everything.</p> <p style="text-align: left"><br /> <strong><a name="c" id="c"></a>Q. tClientless crashed! Why did this happen?</strong><br /> A. Well, first you should note that tClientless is only in the BETA (development) stages. The reason it crashed it likely due to incorrect parsing, send the “lastpacket.txt” file to bot90210 so that I can fix this issue.</p> <p style="text-align: left"><br /> <strong><a name="d" id="d"></a>Q. How can I make a character a master for every character logged in through tClientless?</strong><br /> A. Go to File->Master Manager and enter the character’s name. They will be saved as a global master and will be able to use master commands for every character.</p> <p style="text-align: left"><br /> <strong><a name="e" id="e"></a>Q. I want to delete an alias, how can I do that?</strong><br /> A. Go to File->Alias Manager and delete the alias entry.</p> <p style="text-align: left"><br /> <strong><a name="f" id="f"></a>Q. tClientless says the authentication failed and/or cannot connect to the server.</strong><br /> A. This could happen for various reasons, the most common are that our server is experiencing issues or you are not registered with the BETA test.</p> <p style="text-align: left"><br /> <strong><a name="g" id="g"></a>Q. I missed out on the BETA, will I be able to use tClientless?</strong> <br /> A. Possibly. We’ve limited the users that can join the BETA because we don’t want to overload the server, if the server can handle 300 users comfortably then you will increase the limit. We’ve made tClientless connect to our servers because we’re sick of people posting it elsewhere.</p> </div> <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> </div> <form action="http://www.google.com/cse" id="cse-search-box" target="_blank"> <div align="right"> <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="20" /> <input type="submit" name="sa" value="Search" /> </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10605650-1"); pageTracker._trackPageview(); } catch(err) {}</script> <!-- Piwik --> <script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1); piwikTracker.trackPageView(); piwikTracker.enableLinkTracking(); } catch( err ) {} </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript> <!-- End Piwik Tag --> </body> </html>
Code: html, body { margin:0; padding:0; } body { background-image: url(images/bglong209.png) ; background-repeat: repeat-x; text-align:center; padding:0px; } .p { margin:0px; padding:0px; font-size: inherit; font-family: inherit; font-weight: inherit; text-align: inherit; color: inherit; line-height: inherit; vertical-align: top; } #container { width:654px; margin:0px auto; top: 0; } #ad { } p { padding-top:0px; margin-top:0px; color: #000; background-color: #FFF; } img { border:0px; } .AbsWrap { position: relative; left: 0; } .rowWrap { width: 100%; } .clearfloat { clear:both; height:0px; } #main { width:654px; margin:0px auto; border: 0px none #f0f0f0; top:0; } #main1 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #main2 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #Content { background:#fff; clear:both; width: 654px; font-family: Arial, Helvetica, sans-serif; font-size:10px; } #ContentMain { padding-left: 10px; padding-right: 10px; padding-top: 20px; margin:0px auto; border: 0px none #f0f0f0; } #HomeButton { margin:0px auto; margin-top:0px; width:163px; height:47px; margin-bottom:0px; float:left; display:inline; } #clientless { margin-left:0px; margin-top:0px; width:164px; height:47px; margin-bottom:0px; float:left; display:inline; } #FaqButton { margin-left:0px; margin-top:0px; width:101px; height:47px; margin-bottom:0px; float:left; display:inline; } #Links { margin-left:0px; margin-top:0px; width:99px; height:47px; margin-bottom:0px; float:left; display:inline; } #AboutButton { margin-left:0px; margin-top:0px; width:127px; height:47px; margin-bottom:0px; float:left; display:inline; } #Domi { margin-left:0px; margin-top:59px; width:320px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi1 { margin-left:0px; margin-top:59px; width:334px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi2 { margin-left:0px; margin-top:59px; width:654px; height:271px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #tClientlessBanner { margin-left:0px; margin-top:59px; width:333px; height:192px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner1 { margin-left:0px; margin-top:0px; width:59px; height:83px; margin-bottom:0px; float:left; display:inline; } #colwrap3 { float:left; width:273px; margin-top:0px; margin-left:0px; } #DownloadButton { margin-left:0px; margin-top:0px; width:47px; height:48px; margin-bottom:0px; float:left; display:inline; } #colwrap5 { float:left; width:226px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #Downloadlatestversionbanner { margin-left:0px; margin-top:0px; width:226px; height:25px; margin-bottom:0px; float:left; display:inline; } #colwrap7 { float:left; width:89px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #BlueTinyBanner { margin-left:0px; margin-top:0px; width:7px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner3 { margin-left:0px; margin-top:0px; width:89px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner2 { margin-left:0px; margin-top:0px; width:137px; height:23px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner2Long { margin-left:0px; margin-top:0px; width:274px; height:35px; margin-bottom:0px; float:left; display:inline; } #Main2ndBanner { margin-left:0px; margin-top:0px; width:654px; height:87px; margin-bottom:0px; float:left; display:inline; } #interface { margin-left:0px; margin-top:0px; width:654px; height:615px; margin-bottom:0px; float:left; display:inline; } #footer { margin-left:0px; margin-top:0px; width:655px; height:93px; margin-bottom:0px; float:left; display:inline; } #Version { font-size:9px; color: #FFF; font-weight: bold; font-variant: small-caps; background-color: #416F7C; font-family: Verdana; text-align: left; } #container #Content #ContentMain p a font { color: #0000FF; }
Hi, I'm having a strange problem in IE7 and IE8 with CSS and toggle functionality. I'm using some simple jquery script to show/hide a div when a user clicks on a button. However, there's a strange issue happening that in IE7 and 8 the expanded content overlaps the content below. It should push all the content below it down instead. I'm completely perplexed by this. It works fine in Firefox and Safari. Here is a sample page: http://easytrip.ie/client-services Any help would be much appreciated! So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. Hi I have a website that i want to push to the center of the page for high resolutions.. i added a div tag for it as <div align=center> //all data here </div> now everything is pushed to the center except the menu divs and logo divs. they are pusing to the very center of the page, i mean starting from the center of the page and not on their proper place.. the problem is only in IE in firefox it works well.. here is my css code for logo and menu #header .logo{ margin: 15px 5px; position: absolute; } #header .menu{ position: absolute; margin-top: 1px; margin-left: 158px; } can anyone please advice me how can I fix this problem so that it works with ff and ie both thanks Hello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers. The following is how it looks on FireFox on my computer and how it SHOULD look for everyone: http://i53.tinypic.com/2h3bi8z.jpg This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later): http://i55.tinypic.com/262sb5h.png The code for the 2 DIV's (I can post whole page CSS code if required): Code:
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}
#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}
The HTML code for the page: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Home - Dine in</title>
<meta name="description" content="Homepage for Dine in" />
<meta name ="keywords" content="Dine, food" />
<link rel="stylesheet" type="text/css" href="divstyles.css" />
<link rel="stylesheet" type="text/css" href="formatstyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="menu_style.css" />
</head>
<body class="body">
<div id="page_section">
<div id= "banner">
<img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
</div>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='index.html' >Home</a></li>
<li class="button"><a href='aboutus.html' >About Us</a></li>
<li class="button"><a href='http://' >Menu</a></li>
<li class="button"><a href='http://' >Gallery</a></li>
<li class="button"><a href='http://' >Reviews</a></li>
<li class="button"><a href='booking.html' >Bookings</a></li>
<li class="button"><a href='http://' >Upcoming Events</a></li>
<li class="button"><a href='http://' >Contact Us</a></li>
<li class="button"><a href='http://' >Links</a></li>
</ul>
</div>
<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>
<h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>
<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br />
Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.
<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>
<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>
<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>
<div id="shoppingCart"></br></br>
<center>Your cart is currently empty.</center>
</div>
<div id="countdown"><br/><br/>
<script type="text/javascript" src="countdown.js"></script>
</div>
</div>
<div id= "footer">
<b>Disclaimer</b><br/>
This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
</div>
</div>
</body>
</html>
The URL for the site (if it helps or is needed): http://freddo.bf.rmit.edu.au/~s3286104/TheDineIn/index.html Any help is appreciated! Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Hey, A while back i wanted to make a personal PHP based addressbook, just for my own use, very simple without much layout. But later i decided to expand the functionality and layout a bit. Now i ended up with a nice result (in my opinion) however only for Firefox in the resolution 1024x768. Most of the problems have to do with the positioning of the div's of which my page consist. The page is divided like this: Without borders between the div's. This is how it looks in Firefox which im ok with: http://img529.imageshack.us/img529/9766/ffkg1.jpg And it looks like this in IE: http://img371.imageshack.us/img371/2332/iezn0.jpg I used the following classes for the divs (i only post the relevant parts of the classes that has to do with the positioning): -EDITED- deleted the css code in this post. The new updated code is in my new post. I've spented alot of time to get the divs in the right position just for Firefox when i started this site. Can anybody help me with this? I want to specify everything in percentages to make it look right in all resolutions , however this doesnt seem to work yet but i first want to know how to make my pages look good in IE too. thanks in advance. Hi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb I really can't seem to even find the words to describe this error. I have posted before in regards to another issue that seemed to have alluded you guys so i am posting again for another error that is more important. What is the Error? Ok basically the yahoo(google has same issue) ad lags when you scroll up and down. When I say lag i mean it sort of stays in it's position while the rest of the layout moves on, after a second it corrects itself. I have excluded everything in my layout except the header, and even tried removing the ad from the div and everything and can't seem to figure out what is causing this issue. http://www.unlimitedgamer.net/header_re.php For users on WINDOWS (for some reason it works fine on MAC) based computers simply focus your eyes on the advertisement, and scroll up and down while watching it. It's impossible not to see it. Note, this issue doesn't occur in IE7 (note sure about IE6) Any help would be greatly appreciated as this lil bug is holding up the opening of my layout Hi to all, I have a problem with an empty div. I have created an empty div as follows: Code: <div id="more"></div>Hello Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div? Thanks and Regards, Sim085 ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is). I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8. Some code involving said elements: Code: #nav {
right: 10px;
top: 45px;
position: absolute;
background-color: black;
height: 50px;
width: 640px;
}
ul {
text-overflow: clip;
display: inline;
border-bottom: 25px solid black;
}
li {
list-style-type: none;
float: left;
margin-top:25px;
}
#aboutButton {
display: block;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
margin-left: 40px;
clear: both;
}
#aboutButton:hover {
display: block;
background-position: 0px 20px;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
clear: both;
}
message me for a link to the site if you would like to see it in action. any help is appreciated. thanks! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text. Is this common? Is it my code? You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php 100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help. CSS Code: @charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
}
body {
background-color: #63aacf;
margin-top: 0;
margin-left: 0;
padding: 0;
}
h1 {
margin-top: 0;
padding: 0;
}
#header {
background-image: url(images/top.png);
background-repeat: repeat-y;
margin-bottom: 0;
}
#content {
margin-top: 0;
}
#spacer {
background-image: url(images/supra_02.png);
background-repeat: no-repeat;
}
#wrapper {
width: 800px;
min-height: 100%;
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-repeat: repeat-y;
overflow: hidden;
}
* html #wrapper {
height: 100%;
}
#sidebar {
width: 200px;
float: left;
}
#mainContent {
width: 600px;
float: right;
}
#clearfloats {
height: 0;
clear: both;
overflow: hidden;
}
HTML Code: <div id="wrapper">
<div id="header">
<h1>boogy</h1>
<div id="spacer"> </div>
</div>
<div id="content">
<div id="sidebar">
Link <br /> Link <br /> Link </div>
<div id="mainContent"> Hello World</div>
<div id="clearfloats"></div>
</div>
</div>
Here's the site: http://www.entertainmentengineering.com/v6.issue01/page.01.html Issue is only in IE. When the window size is to small, the right columns drop down to form a new line. In FF it works exactly like I want it to where the excess is just off screen. Any idea how to fix this issue? Much thanks! Hey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list... BTW, the CSS is http://jordanmeeter.com/new/includes/x.css. Here's the page which loads fine in Firefox The search box doesn't load correctly in IE, any suggestions, have spent ages tinkering and haven't found a solution which works for all browsers. Thanks Hi, I've searched the forums and seen where others had a similar problem, but the suggested solution has not worked for me. What I'm doing: using div tags to create the appearance of a 4 column form. For some reason, after I use the tag <div id='2col_right'> Form fields contained in my next div tag (<div id='2col_left'>) are un editable. If I use my tab key, I can get to them in tab mode. And if they already contain data they can be edited, but the blank fields (see Trustee) will not allow me to click into. My code snippet, with the style sheet included, looks like this: Please see my code snippet: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#pagecontainer {position: relative; top: 0pt; right: 0pt; margin: 0pt;}
#maincontent {position: relative; clear: both; margin: 0pt;}
#2col_left {margin: 0pt 10pt 10pt 4pt; float: left; padding: 4pt; clear: left;}
#2col_right {margin: 0pt 10pt 10pt 4pt; padding: 4pt; clear: right;}
.formcouple {margin: 0pt 5pt 5pt 5pt; font-size: 8pt;}
.formlabel {width: 100pt; border: 1pt solid #003366; font-weight: bold; font-size: 8pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt; background: #ECF5FD}
.formvalue {border: 0pt solid black; font-weight: normal; font-size: 10pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt;}
</style>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bottommargin="0" margin="0">
<div id="pagecontainer">
<div id="maincontent">
<form name="fCustForm" action="default.cfm?fuseaction=custCreate" method="post">
<div id="2col_left">
<span class="formcouple">
<span class="formlabel">Customer Name</span>
<input type="text" name="name" value="john doe" size="30" maxlength="60">
</span>
</div>
<div id="2col_right">
<span class="formcouple">
<span class="formlabel">Address</span>
<input type="text" name="address" value="126 Some Rd " size="30" maxlength="255">
</span>
</div>
<div id="2col_left">
<span class="formcouple">
<span class="formlabel">Trustee</span>
<input type="text" name="trustee" value="" size="20" maxlength="25">
</span>
<br>
<span class="formcouple">
<span class="formlabel">City2</span>
<input type="text" name="city2" value="" size="30" maxlength="30">
</span>
<br>
</div>
</div>
</div>
</body>
</html>
BTW - I am doing this in IE6.x IE6,IE7,Opera,Safari OK FF,FF2 Broke I have three sections on a page Code: <div id="Page"> <div id="Content"> ... </div> <div id="Menu"> . </div> </div> DIV's Content and Menu are both floated left and have set widths so that they both fit on one line. All is fine. I can put anything in the Content DIV apart from a <select> box. If I put a <select> box in it forces the Menu DIV to drop to the bottom of the page, as if there is no more room on the line (which is empty). As above, this works in IE, but fails in FF and FF2, any ideas? Thanks. |
|||||||