|
CSS - I Dont Think A Doctype Can Fix This Mess...
Ok, some trouble with Fire Fox and IE.
I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it. http://ernies.bombinaid.com Problems IE: The main box areas in each page keeps going over the menu! FireFox: In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping. Here is the css code: Code: body {background-color: black}
.header {width: 100%; margin-left: -1px; margin-top: -4px;}
.links {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2 {background: url(corner1.gif) 0 100% no-repeat}
.main3 {background: url(corner2.gif) 100% 100% no-repeat}
h3 {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link {text-decoration: underline; color: black;}
a:hover {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr {color: white}
img.ajm113 {margin-left: 30cm;}
Can someone help me out here? Similar TutorialsYou can check this problem in the pink square with curvy corners that I have in the url metatradersoftware com(I cannot mention it because of forum fules). How I am supposed to show you my code if you do not know the url where it is?This post is just for asking a question. Thus, I hope there is nothing wrong with it. If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft. I would appreciate any suggestion. Thanks in advance Hello everybody, please excuse me as i am a begginner. I have made some changes to my CSS and everything is fine apart from one section. On my website in the "Check-out" are i should display a Paypal application and and image containing information. I can't figure out why the image and the application are half way down the page. Here is the Website. Code: http://www.Archives-music.com Here is the CSS Quote: /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} /* Joker Designs Soundclick CSS*/ .mainTable {background: transparent; color:#000000; width:893px; margin-left:auto; margin-right:auto; text-align:left; border: none} .mainContent {background: transparent; color:#color:#000000; width:893px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navbarBottom, .navbarTop {width:893px;} .navigation {background: url(); color:#000000; width:893px; height:1140px; float:left; z-index:9; overflow:hidden; margin:-5px 0px -25px 0px; } .navigation a, .navigationDivider, .navigation .headline, .navigation .div, .navigation img {display:none;} .navigation .statsNumbers {color:black; margin-left:50px;} form .mailingList {margin-left:55px; position:absolute; top:990px; z-index:3;} .mlheadline {display:none;} .mlprivacy {display:none;} .contText form {height:150px;} .contText a {border:none;} .headline {display:none;} .headlineBig {display:none;} .headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#666666; font-size:0px; font-weight:normal;} .headlineSuppl a:link, .headlineSuppl a:visited {color:#929292; text-decoration:none;} .headlineSuppl a:hover {color:white; text-decoration:underline;} .pageturner {background:#000000; color:#cccccc; border:#222222 solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#929292; text-decoration:underline;} .listedPicsBox {border:#222222 solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} .color_supplemental {color:#666666;} .alternateBG0 {background:none;} .alternateBG1 {background:none;} .mainContent .contHeadline {clear:left; font-size:0px; color:#929292; padding:12px 0px 2px 20px;} .mainContent .contText {clear:left; padding-left:0px;} .mainContent .contInterview {clear:left; padding-left:0px;} .mainContent .newsBox {clear:both; background:#000000; color:#cccccc; border:#222222 solid 2px; margin:0px 20px 20px 20px; padding:20px;} .playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;} .playerBox .playerHead {background:; color:#000000; border-top:#000000 solid 1px; border-bottom:#000000 solid 1px; text-align:right; font-size:10px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#;000000 text-decoration:underline;} .playerBox .playerHead a:hover {color:#000000; text-decoration:underline;} .playerBox .songBox {background:#000000; border-bottom:#000000 solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:; font-size:10px; padding:1px;} .playerBox .songBox .singleSong:hover {background:; color:#000000; cursorointer;} .embeddedPlayer {font-size:12px; margin-left:130px; padding40px; position:absolute; top:620px; width:620px; z-index:3;} .contHeadline {display:none;} .pageFooter {clear:both; color:white; padding:30px 0px 10px 20px; width:800px; margin-left:auto; margin-right:auto; text-align:center;} .songsBox {border-bottom:#000000 dashed 0px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox {background: url(); background-repeat: repeat;} .songsBox a:link, .songsBox a:visited {color:#000000 ;} .songsBox a:hover {text-decoration:underline; color:#a70013;} a.songtitle:link, a.songtitle:visited {color:#a70013; text-decoration:none; font-size:13px; font-weight:bold;} a.songtitle:hover {color:#000000 ; text-decoration:underline;} .songsBox .actionlinks {font-size:11px; color:#a70013;} .songsBox .topSong {color:#a70013; float:left; text-align:left; font-size:10px;} body { background-image: url(http://www.ozphotolink.com/usr/95/sphere_black_wh); background-color: #ffffff; background-position: center center; background-repeat: ; background-attachment:fixed; } img { border: none; } body, div, tr, td, select, textarea, input, option { font-family:Verdana; font-size:10px; } a, a:link, a:visited } color:#ffffff; text-decoration:none; } a:hover { color:#a70013; text-decoration:underline; } salesection { background-color:black; } div.salesection /* I made changes to margin and positioning here.*/ { position: absolute; top: 65px; left: -140px; margin-right: 0px; margin-left: 0px; Width: 790px; heigth: 100px; } /* I added this section here.*/ a.paymentsection { position: relative; top: 0px; left: -180px; } /* I added this section here.*/ div.saleform { position: relative; top: -195px; left: 185px; } /* I added this section here.*/ div.button { position: relative; top: 15px; left: 0px; } div.main { position: absolute; top: 0; left: 50; margin-left: 10px; width: 853px; height: 1521px; margin-top:130px; } /* I made changes to margin and positioning here.*/ div.paypal { position: absolute; top: 10; left: 230px; margin-left: 0px; width: 210px; height: 100px; margin-top:1140px; z-index:7; } div.paypal1 { position: absolute; top: 0; left: 50; margin-left: 330px; width: 255px; height: 100px; margin-top:1140px; z-index:7; } div.paypal2 { position: absolute; top: 0; left: 50; margin-left: 600px; width: 177px; height: 100px; margin-top:1140px; z-index:7; } div.widget { position: absolute; top: 0; left: 50; margin-left: 457px; width: 380px; height: 288px; margin-top:784px; z-index:7; } div.newsfeed { position: absolute; top: 0; left: 50; margin-left: 50px; width: 385px; height: 165px; margin-top:870px; z-index:6; } div.mailinglist { position: absolute; top: 0; left: 50; margin-left: 50px; width: 380px; height: 50px; margin-top:1075px; } div.tv { position: absolute; top: 0; left: 50; margin-left: 50px; width: 680px; height: 340px; margin-top:1470px; z-index:6; } #mail { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 108px; margin-top:1435px; z-index:4; background: url(http://elvissalic.com/theachievers/email.png); } #mail:hover { background-position: top right; } #twitter { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 99px; margin-top:1540px; z-index:4; background: url(http://elvissalic.com/theachievers/twitter.png); } #twitter:hover { background-position: top right; } #youtube { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 102px; margin-top:1636px; z-index:4; background: url(http://elvissalic.com/theachievers/youtube.png); } #youtube:hover { background-position: top right; } #skype { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 104px; margin-top:1740px; z-index:4; background: url(http://elvissalic.com/theachievers/skype.png); } #skype:hover { background-position: top right; } #hotboy { display:block; position: absolute; top: 0px; left: 50%; margin-left: -410px; width: 403px; height: 66px; margin-top:1853px; z-index:9; background: url(http://img860.imageshack.us/img860/8505/paypalq.png); } #hotboy:hover { background-position: top right; } Does anybody have any ideas?. I apologize for being so simple but i am a complete beginner with all things CSS. Peter Hi, Here is the site I am working on: http://www.pizzaz-lingerie.com/launch.php It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one. -CJ haha, Web development could actually be fun if the browsers would at least adhere to the same standard! Anyway, in my web page I have this setup going: Code: <div class="logoContainer"> <div class="indexLogo"> <img src="/templates/include/index/logoLeft.jpg"> </div> <div class="indexLogoRight"> <img src="/templates/include/index/logoRight.jpg"> </div> </div> and the CSS Looks like this: Code: .logoContainer {
position:relative;
width:100%;
min-width:866px;
height:100px;
background:url(include/index/logoFiller.jpg);
background-repeat:repeat-x;
}
.indexLogo {
float:left;
min-width:431px;
height:100px;
}
.indexLogoRight {
float:right;
min-width:384px;
height:100px;
}
This works fine in IE and safari, but in IE the right floated div drops down when the browser window is resized to a pixel size smaller than the width of the 2 images. I am forcing IE into standards comliant mode but it doesn't fix this problem. I've tried various fixes on the net and nothing seems to work. What am I doing wrong or how can this be corrected? This is my first css html design and its been quite a struggle. I've been reading about bugs and hacks for ie 6 but recognising them and implementing the changes I'm stumbling on. The pages that look the worst are : efficient-heat net / form and efficient-heat net / services. They have been decimated by ie 6. I've taken out the javascript navigation for validation reasons. I know about conditional comments so if I can I would like to make adjustments to the code rather than finding hacks. What's going on with these pages. Can you give me some suggestions of what I need to do. I appreciate any help, Thanks. I'm trying to add tables to page in my Wordpress blog, and when I publish, there is TONS of white space between the previous paragraph and the table. It appears the more rows I have in the table, the more white space there is. Which makes me suspect that it might be something to do with the CSS stylesheet. Any ideas on how to solve this? In case you need it, the tables are about half-way down on this page: dominatelocalrankings.com/skeptical TIA for any help, Tom Hello, I am trying to make my webpage, www.jwwebdesign.info, W3 Valid. However, when I insert: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> at the top of the page, and try to vaildate, it does not like my <table height="100%"> What is a CSS alternative I can use so that I can validate my page (height: 100% won't work). Thanks, Jeff I know this may sound a stupid question. However I have been reading about XHTML and CSS for these last few weeks. From what I understand a DocType is there to determine if an XHTML document is well-formed. Therefore from my understanding the DocType should have not be related with CSS. However today I wrote the following peace of code: Code: <html>
<head>
<title>Test</title>
<style>
div > span { color: red; }
</style>
</head>
<body>
<div><p>
<span>hello</span>
</p><span>World!!</span>
</div>
</body>
</html>
On Internet Explorer 7 it did not work since 'Hello World!!' was writen all in black. However on Firefox it worked fine since 'World!!' was correctly displayed in red. Then I added the Strict DocType to the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... and it started working on Internet Explorer 7 as well! Now I am glad that it worked on Internet Explorer 7 when using the DocType (Strict). However isn't this wrong? I mean shouldn't this just work without the DocType since it is CSS related and not XHTML? I am very new to all this and I understand that I may be missin something here! However I would be very greatfull if someone could explain me if this behavior from Internet Explorer 7 is correct or not! Thanks and Regards, Sim085 Hi, so i dont know how else to explain this with out giving you the link ocixx.com/index1.html the three buttons on the right Facebook myspace twitter, everything is perfect with them, except when you click them nothing happens, i am using css file and scripts i found on the net, cause i cant program the source to the css file is in the source to the page, i dont know what to do hi, I am trying to do DIV 100% height to match the browser height. as I read only way is to make body tag set to 100% and then whatevers is defined 100% within body will readjust at 100% height. problem i found, it doesnt work with any Doctype I set for the page, not xmlns transitional, strict, 4.01 strict , transitional, you name it. BUT as soon as I remove Doctype and start page with just <html> tage this CSS works. I ve tried to link css and embed, same results. W3C validation checks out with no errors. hers code. 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=iso-8859-1" />
<title>CSS</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#333333;
height: 100%;
}
.centerwrapper {
width: 1000px;
height: 100%;
background-color:#0099FF;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div class="centerwrapper"></div>
</body>
</html>
if someone has an idea what doctype would work or if theres another problem with this. Ok this is the website: http://mydeco.com/ and if you hover over the sections/links at the top, the subnav appear. However if you go to community section & then try to hover over different sections, the subnav dont seem to appear! This happens for a colleague of mine on FF & IE 7. However I have same browsers but this problem doesnt occur with me! she has cleared cache Hi newbie here, Just completed site for client, to find out that the CSS text does not appear in IE7. This is the exact source - <div id="homewrapper"> <div id="homeimage"> <div align="right"><a href="" target="_blank"><img src="images2/logo_07.png" alt="Enjoy England" width="131" height="178" border="0" longdesc="" /></a><a href="" target="_blank"><img src="images2/logo_09.png" alt="Tourism Newquay" border="0" longdesc="" /></a></div> </div> <div id="intro"> <p>For your perfect holiday in Newquay, come and stay at 12A Pentire Heights. We have a 2 bedroom self catering apartment which has fantastic sea views overlooking the world famous Fistral Beach.</p> <p> </p> <p>Pentire Heights is ideally located, being only a short walk from Fistral Beach, and a 20 minute walk from Newquay town centre. There is also a private car park space allocated to you while you stay.</p> <p><br /> In Newquay you will find an array of shops, bars, bistros, restaurants, pubs, clubs and night life. Explore the cliff top walks along one of the eleven superb beaches or visit some of the many attractions in the town or close by, such as the Zoo, Golf Course, Trenance Leisure Park, Waterworld and the Sea Life Centre.<br /> <br /> Pentire Heights apartments in Newquay provides an ideal base for visiting the whole of Cornwall.</p> </div> Any help will be much appreciated! Cheers! Hi, I was learning CSS and it didn't quite explain what the second img does. Code:
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
Also on some sites i noticed it would have more than one tag: Code:
div.img img img img img {}
or Code:
div div div div {}
if you could help, thank you The right column of this website just started appearing in the wrong place, as you can see he [deleted] Unfortunately, i did not make the site but have been asked to fix it. I cant seem to find the cause of this at all, any help would be great, thanks! Edit: Found the mistake, a WYSIWYG field in the admin that shows on the header was screwing up the page with invalid code. I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox. I've also been recieving complaints that my page is non-functioning with the font appearing "way too small". If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful... Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox... Link to page I'm having a CSS problem. Everythign i desinged worded fine until i included a <!DOCTYPE> I'm using XHTML 1.0 Strict and everything validates fine, as well as the CSS (according to w3c) Alink to the site: The "E" Proposition here is teh CSS code I am Using (the navigation links) Code: .Nav1 a:hover{color: #666666;}
.Nav1Td{border-right: 1px solid #999999;background-color: #000000;}
.Nav1{padding: 2px 0 10px 0px;font-family: MS Tahoma, Arial;}
.Nav1 .line{border-top: solid 1px #000000;margin: 5px 0 5px 0;}
.Nav1>.line{margin: 6px 0 4px 0;}
.Nav1 h4{margin: 4px 0px 5px 5px;font-size: 10pt;font-family: MS Tahoma, Arial;}
.Nav1>h4{margin: 4px 0px 4px 5px;}
.Nav1 h3{margin: 4px 0px 5px 5px;font-size: 8pt;font-family: MS Tahoma, Arial;}
.Nav1>h3{margin: 8px 0px 4px 5px;}
.Nav1 ul{list-style: none;margin: 0;padding: 0;}
.Nav1 li{margin: -4px 2px;width: 90%;}
.Nav1>ul>li{margin: -3px 2px;}
.Nav1 a{position: relative;background-image: url(images/off.gif);width: 115px;cursor: pointer;display: block;color: #000000;font-family: MS Tahoma, Arial; font-size: 9pt;padding: 2px 4px 4px 8px;margin: 1px 0px; text-align: justify;text-decoration: none;}
.Nav1>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 8px;}
.Nav1 a:visited{color: #000000;}
.Nav1 a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px 8px;background-image: url(images/over.gif);text-decoration: none;}
.Nav1>ul>li>a:hover{margin: 1px 0px;}
might i have made a careless error that CSS validator is not picking up on?? If I take out the doctype tag, everything works fine. But of course, i dont want to do that...heh any help would be greatly appreciated... Is this a strict (or even valid) doctype? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> what should I expect the UA to behave like? I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes. Hi, I made an html document, and a css file, works allright, but when i delete the doctype declaration, it's not working correctly anymore -> the body width is gone, and my content is stretched, losing my left and right margins. Code: body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
width: 710px;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
margin-bottom: 3em;
The problem is, that i will use this css file for an xml file, transformed by xslt, and the resulting html file doesn't have a doctype specification, that means i can't seem to add a doc spec and still keep my xslt file valid. any suggestions to solve this problem..? thanks a lot, jarra I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything? Also what the heck is all of this in my homepage?: <html dir="ltr" lang="en"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>HotLink Forums - powered by vBulletin</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" /> <meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" /> <meta name="description" content="Message Boards for HotLink Hosting" /> Does the direction and lagnuage statements in the html tag matter towards anythign important? What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there? Do the meta tags below the title need to be below the title because I know I can put them above it with the others. Also, why is there a blank white space at the top of the forums? And why does the background to my td at the bottom not work? |
|||||||