|
CSS - Browser Issue With Form Not Showing
I have added a captcha code to a test form on my site which looks and works fine in ie. But in firefox you can't see it.
I am sure it is something simple but I just can't figure it out. The form which can be viewed is www cristalclear.co.uk / contactus.php (not allowed urls yet hence above) Any help would be most appreciated. Similar TutorialsHey Everyone, I was wondering if anyone could take a quick look at my Style Sheet and let me know I can do to improve and why it isn't working in all browser's... It works great in most browser's but then there is explorer, and it doesn't seem to work fine in there... Here it is and I would really appreciate it if someone could look at it for me, thanks... Nick Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan Can anyone give me an idea why the color for the background of the Wordpress site I am revising the css script shows up 2/3 the color I want and the top one third is remains the original color. There is no "wrapper" option to revise. This is the 3 lines that seems to determine those changes.. *************************************** body { background: #180033 url (1-default/bodybg.png) repeat-x top; } a { color: #9BCB65; } a:hover { color:#180033; } *************************************** Could the problem be "repeat-x top;" ???????? Big thanks to anyone who offers help. I got it figured out. Can delete this thread! Hi! I'm relatively new at designing websites...I'm a designer...trying to jump into web. I usually use the Dreamweaver templates...and go from there. This site I've built doesn't show up at all in IE. Where'd I go wrong? Thanks for any help. I've checked out several hacks and things, but without know why it's not showing up I don't really know where to go to look for answers. Hi there! I have noticed when I go to my site in firefox, and i'm guessing it probably happens in other browsers too- the 3rd post (the title and the information saying 'bicycles for girls') drops down outside the div it should be in and messes up the bottom layout of the page. The weird thing is.. If you hit refresh it automatically fixes itself. Now this has happened quite a few times when I have looked at it. Is this any kind of recognised css bug? Any feedback would be greatly appreciated, hellosam . co . uk / portfolio Sorry, have had to put spaces in the above address so it allowed me to post! Cheers, Sam Hi, I have a template that works perfectly in Internet Explorer, but doesn't work well in all the other browsers. Here is the template: http://www.gmaptools.com/redemo/format.html (The scrollbar located on the right of the page doesn't contain to 100% height in the other browsers) The entire page must stay at 100% height and 100% width, and work in the other browsers the same way it works in Internet Explorer. Does anyone know why it isn't working in the other browsers? I need it to work in: 1. Internet Explorer (Windows) 2. FireFox (Windows & Mac) 3. Opera (Windows) 4. Safari (Mac) I really appreciate any assistance you can give me. Thanks in advance, Please look at this site - www.tmhdesign2.com in Mac IE. I have someone telling me the site is waaaaay out of whack though it is completely w3 strict compliant. The links on the splash page are up on the top thought they are not apparent. Thanks. TOm Hi All Can anyone please tell me where am I going wrong in code below it fairly straight forward, Style switcher works fine. The problem is When I'm using Firefox background image doesn't show but there no problem in IE. why???? Thanks Zed 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" /> <title>Untitled Document</title> <script type="text/javascript" src="styleSheetSwitcher.js"></script> </head> <body><center> <div id="main">Hello <div id="centerbox">world</div> </div></center></body> </html> css code Code: #main {
position: relative;
background-image:url(images/Driving_bkg3.gif);
background-repeat: no-repeat;
height: 100%;
left: 5%;
}
#centerbox {
margin: -20% 3% 0 40%;
padding: 0%;
width: 41%;
height: auto;
background-color:#C9F;
}
This template works perfectly in firefox (as I want it) but the background-images won't show and the margin/padding shows wrong. When I validate the CSS in firefox, it goes through, but when I do it in IE, it tells me that the id's are suppose to be used for block elements. I've done a search and read up on this over at w3schools but it was fruitless. I would like for it too look in IE the way it does in FF. I think it has something to do with the header or some part of the id's, because that feels a bit odd coding from my part. Please excuse the poorly formatted CSS, as the first part of it was made online where you had to use space to format it. Here is my source code: css Code: Original - css Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Omega Destiny</title> <style type="text/css"> body { background-color: #CCCCCC; color: #FFFFFF; } a:link { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:hover { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } a:visited { text-decoration:none; color: #104E8B; background-color: #E8E8E8; } a:active { text-decoration: none; color: #104E8B; background-color: #E8E8E8; } #wrapper { width:900px; margin:0px auto; text-align: center; } #header { height:100px; background-color: #CCCCCC; background-image: url(http://img476.imageshack.us/img476/1419/banner7sy.jpg); background-repeat: no-repeat; background-position: left; color: #FFFFFF; } #cornernav { text-align: center; float:right; width: 580px; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; height: 99px; } #cornernav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #cornernav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #sidenav { float: left; width: 18%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #sidenav a:link { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:hover { text-decoration: none; color: #104E8B; font-weight: bold; background-color: #E8E8E8; } #sidenav a:visited { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav a:active { text-decoration: none; color: #000000; font-weight: bold; background-color: #E8E8E8; } #sidenav h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } #sidenav p { margin-left: 10px; margin-right: 10px; margin-top: -10px; } #content { float: right; text-align: left; width: 80%; background-color: #E8E8E8; color: #000000; border: 1px solid #000000; } #content p { margin-left: 10px; margin-right: 10px; } #content h2 { background-image: url(http://img204.imageshack.us/img204/664/maintitle8wo.jpg); text-align: center; font-size:100%; height:1em; line-height:1.6em; padding-bottom: 9px; margin-top: 0px; position: relative; bottom: -1px; } /* .footer { text-align:center; float:right; font-size:12px; color: #000000; margin-bottom: 20px; width: 80%; background-color: #E8E8E8; } */ </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="cornernav"> <h2>Interent Service</h2> <p> This is a box designed to be a short and comprehensive. You can use it to give a statement for what the website is about, a quote or simply some random text. Anything goes, since you are the one that is going to use it. There is enough space for three full lines of text. Enjoy! </p> </div></div> <br /> <div id="sidenav"> <h2>Site Navigation</h1><br /> <p><a href="#">Home</a><br /> <a href="#">About</a><br /> <a href="#">Contact Us</a><br /> <a href="#">Portfolio</a><br /></p> </div> <div id="content"> <h2>Omega Destiny</h2> <p><a href="#">Welcome</a> to my website template called Omega Destiny. It is a big improvement from my previous design called "Arcane Flame" and is meant to have a very professional look with its gray theme. Omega Destiny is table-less and entirely based on divs.</p> </div> <!-- <div class="footer"> Design by "Moridin". Copyright 2006 All Rights Reserved. </div> --> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Any and all help and comments is appreciated. Best Regards, Moridin Hi, I'm having a browser compatibility issue that I'm hoping someone can help me with. This image rollover code shows up fine in IE 7, but not in Firefox. Any simple solutions? Is this because I'm using a table? I'd much appreciate any help! I've included the HTML and CSS below: Thanks for any assistance! darleen HTML************ Code: <div id="menu"> <center> <table border="0"> <tr> <td><a href="exsum.html" class="sprite1"></a></td> <td><a href="need.html" class="sprite2"></a></td> <td><a href="progcon.html" class="sprite3"></a></td> <td><a href="progfac.html" class="sprite4"></a></td> <td><a href="budget.html" class="sprite5"></a></td> <td><a href="protim.html" class="sprite6"></a></td> </tr> </table> </center> </div><!--end menu div--> PART OF CSS***************** Code: /*
* START ROLLOVER MAIN PAGE
*/
<!-- 1red -->
a:link.sprite1, a:visited.sprite1{
background:url(images/red3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite1{
background-position:0px 0px;
}
<!-- end 1red -->
a{background:url(../Image/background.gif);}
a:hover{background-position:-50px 0px;}
<!-- 2orange -->
a:link.sprite2, a:visited.sprite2{
background:url(images/orange3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite2{
background-position:0px 0px;
}
<!-- end 2orange -->
<!-- 3yellow -->
a:link.sprite3, a:visited.sprite3{
background:url(images/yellow3.jpg) no-repeat top left;
background-position:-127px 0px;
width:124px;
height:500px;
display:block;
}
a:hover.sprite3{
background-position:0px 0px;
}
<!-- end 3yellow -->
<!-- 4green -->
a:link.sprite4, a:visited.sprite4{
background:url(images/green3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite4{
background-position:0px 0px;
}
<!-- end 4green -->
<!-- 5blue -->
a:link.sprite5, a:visited.sprite5{
background:url(images/blue3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite5{
background-position:0px 0px;
}
<!-- end 5blue -->
<!-- 6purple -->
a:link.sprite6, a:visited.sprite6{
background:url(images/purple3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite6{
background-position:0px 0px;
}
<!-- end 6purple -->
/*
* END ROLLOVER MAIN PAGE
*/
I'm designing a site with a combination of css and tables and I've run into some issues w/IE. I've got some content in a nested table <table id="content"> <tr> <td> Content... </> </> </table> and in my style sheet i have #content{ padding-left:20px; ... } Firefox recognizes this property just fine and displays the table slightly indented, but IE seems to completely miss it. I have figured out a few workarounds, but they end up causing more problems and there are also other thigns that IE has been missing.. Does anyone know what might be causing this? ALSO i have a <div id=divider> inside a td w/css props as width:1px and height:100% and background-color:#000000. again, firefox recognizes this and displays a black line that is the height of the td and 1 px wide, but IE displays a little midget line thats like 10px tall instead of the entire height of the cell. wtf? Hi I'm developing a new website using non tabular css and xhtml. I've used a predefined template which has been edited to my needs for the project. The problem I have is the top menu displays perfectly in FF3 but not in IE7, the top menu has a width of 100% with each of the 4 links having a width of 25% so in FF3 displays right across the page perfectly, but in IE7 the last menu link breaks to a new line. This url shows the issue im having: http://www.purepcs-store.co.uk/tim/new HTML USED: Code:
<div id="menu" class="width">
<ul>
<li>
<a href="index.php" onfocus="blur()">
<span class="title ">Home</span></a>
</li>
<li>
<a href="products.php" onfocus="blur()">
<span class="title ">Products</span></a>
</li>
<li>
<a href="forum/" onfocus="blur()">
<span class="title ">Forum</span></a>
</li>
<li>
<a href="contact.php" onfocus="blur()">
<span class="title ">Contact Us</span></a>
</li>
</ul>
</div>
RELEVANT CSS: Code:
#menu {
margin: 0 auto;
}
#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
.width {
width: 100%;
}
full css code can be seen he http://purepcs-store.co.uk/tim/new/css/layout.css Does anyone have any ideas on how to combat this issue, if you can point me in the right direction it would be much appreciated. Cheers Hi, well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome. here is the test page http :// letseedrop.blogspot.com/2011/01/testing-8. html i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped. well i am pasting css here too if you don't want to go into the source code Code: .demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}
.gamedetailpara {
text-decoration:underline;
color:#000000;
}
ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}
ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}
ul.gamecolumns li .gamedetails:hover {
display:none;
}
ul.gamecolumns li:hover .gamedetails {display: block;}
ul.gamecolumns li:hover .gamedetails:hover {display: none;}
thank you in advance. Hi Everyone I have created a design in CSS and HTML but it appears differently in all of the browsers that I have tested it on can anyone take a look and tell me where I am goin wrong? HTML 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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div class="wrapper">
<div id="hometext" style="background-color: transparent">{content}</div>
<div class="mainbody" style="background-color: transparent">
<div class="headermenu"><a href="http://live.orotor.co.uk">Home</a> | <a href="http://live.orotoro.co.uk/index.php?page=stock">Stock</a> | <a href="http://live.orotoro.co.uk/brochure.html">Brochure</a></div>
<div class="headerlogo"><img src="img/logo.gif" border="0" /></div>
<div class="washingline"><img src="img/washingline.png" border="0" usemap="#Stock" />
<map name="Stock" id="Stock">
<area shape="poly" coords="47,151,129,159,136,96,142,98,156,82,141,56,115,46,82,43,55,45,33,71,44,86,52,88" href="#" alt="Apply here for Credit!" />
<area shape="poly" coords="199,182,282,187,283,123,289,125,306,106,285,81,262,74,228,75,202,80,180,105,194,122,198,118,200,121" href="#" alt="Our Garment Specifications" />
<area shape="poly" coords="384,196,467,193,465,130,471,130,483,112,463,88,438,82,407,82,380,90,360,115,373,132,381,131" href="#" alt="Look at our Wonderful colours" />
<area shape="poly" coords="627,181,700,143,671,86,678,86,682,61,652,50,627,55,598,69,578,89,570,121,591,130,598,126" href="#" alt="See our latest stock levels" />
</map>
</div>
<div style="position: absolute; top: 530px; height: 99px; width: 793px; margin: 0 auto;"><img src="img/footerbanner.png" border="0" /></div>
</div>
</div>
</body>
</html>
CSS Code:
body {
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: 600;
overflow: hidden;
}
a {
text-decoration: none;
color: #000000;
}
input
{
height: 20px;
width: 250px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
textarea
{
height: 100px;
width: 249px;
border: 1px solid #e7ca3c;
background-color: transparent;
color: #000000;
}
a:hover {
text-decoration: none;
color: #e7ca3c;
}
.wrapper
{
margin: 25px auto;
width: 794px;
height: 748px;
text-align: center;
overflow: hidden;
}
.mainbody
{
width: 794px;
height: 748px;
background-image: url(img/background.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border-top: 1px solid #e7ca3c;
}
.headerlogo
{
width: 368px;
height: 134px;
float: left;
clear: right;
margin: 5px;
position: absolute;
background-color: transparent;
}
.headermenu
{
width: 300px;
float: right;
margin: 5px;
padding: 59px 0px 59px 59px;
position: relative;
text-align: right;
}
.washingline
{
width: 793px;
height: 217px;
position: absolute;
top: 260px;
}
#hometext
{
position:absolute;
left:250px;
top:189px;
width:729px;
height:153px;
z-index:1;
}
Any help would be really appreciated as I am really flumoxed here. Best Justin Hi everyone, I've been fixing my blog's CSS issues, and managed to figure out everything expect for 1 thing: If you re-size the browser's window or use CTRL+mouse scroll to zoom in/out, you will notice that the nav menu doesn't follow the rest of the layout, but gets positioned on its own somehow. URL : howtohollywoodvideo dot com Here's my CSS for the layout. Header Logo Nav Menu #header { background: url(images/header-bg.jpg) bottom left repeat-x; width: 100%; float: left; } #header-left { /* For the Logo */ width: 490px; float: left; padding: 5px 0 5px 0; #navigation { width: 100%; float: left; color: #fff font-color: #fff; font-size: 18px; font-family: Verdana; } What is the solution for my problem? I tried position: properties, but nothing could make the menu get re-sized the same way as the rest of the layout. Hello, I am having an alignment issue that I can't seem to fix. The site is accessed he http://cbo4edu.org/newSite/index.html I've used 2 different CSS files... one for the homepage and one for all the other pages . For the homepage, I want the Mission headline to just touch the blue border from the navigation. Right now when viewed in Firefox on my Mac there is an extra white box above it with nothing in it... but in IE it looks fine. How do I get it to look the same in both browsers? For the other pages, I'm having a similar issue. I want about the same amount of white space above the main headings without the words getting cut off. How can I fix this in both browsers? Thank you in advance. Hi there, I have run out of ways to figure out this problem. I have incorporated a Blog into my website: http://www.kohlrbaby.com/blog/ It works fine in IE but not in FF. For some reason the the #contentHolder is not reading the #leftcontent and is not extending. If I try adding height: 100%; this corrects the problem for the blog page, but messes up the look of the rest of my site. Any suggestions? Help greatly appreciated!!! Here is the applicable css code: #contentHolder{ PADDING-TOP: 0px; PADDING-bottom: 30px; PADDING-left: 0px; PADDING-right: 0px; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #leftcontent p { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } #rightcontent p { padding: 10px 30px 0px 30px; font-size:10px; text-align: left; line-height: 1.75em; } #leftcontent { float:left; width: 65%; background:#fff; margin-right:15px; padding-bottom:20px; BORDER-right:#000000 1px solid; POSITION: relative; } #rightcontent, #leftcontent { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } h3{ line-height: 1em;} #rightcontent { line-height: 1em; } #rightcontent ul{ list-style: none; text-align: left; font-size:10px; } #rightcontent ul li { margin-bottom: 5px; } .post { border-bottom: 1px solid #000; padding-bottom: 3px; } Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! Hi, I am using Dreamewaver CS4 and i noticed that when i view my page in live view or in the browser my background image doesnt show up. It does however in the split code/design view. Any help? Here is my Page 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>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #96D0FF;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
font-size: 11pt;
}
/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 267px;
left: 3px;
width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 267px;
right: 3px;
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px;
background-color: #CCC;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>
<body class="thrColAbsHdr">
<div id="container">
<p><img src="Images/Header Home.png" width="509" height="144" align="absmiddle" /><img src="Images/www.yoursouthlandsmile.png" width="163" height="52" /></p>
<p><img src="Images/Links.png" width="780" height="38" /></p>
<div id="sidebar1">
<h3>
<!-- end #sidebar1 -->
Meet The Doctors:</h3>
<p> <img src="Images/Dr. J.png" alt="" width="83" height="95" align="absmiddle" /></p>
<p>Dr. J. Chris Harvan </p>
<p><img src="Images/Dr.png" alt="" width="82" height="93" align="absmiddle" /></p>
<p>Dr. Kristina Harven</p>
<!-- end #sidebar2 -->
</div>
<div id="sidebar2">
<p> </p>
<p><img src="Images/Invisalign.png" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p> </p>
</div>
<div id="mainContent">
<h1> Your Dental Health Is Our Priority</h1>
<p>
<p><img src="Images/DO2.png" width="119" height="119" align="left" />Welcome to Southland Smiles. Your oral health is our highest priority, and we strive to help our patients experience a positive health change and maintain that change for the rest of their lives. </p>
<p><br />
<marquee><img src="Images/Marquee/imgres-1.jpeg" height="119" /><img src="Images/Marquee/imgres-2.jpeg" height="119" /><img src="Images/Marquee/imgres-3.jpeg" height="119" /><img src="Images/Marquee/imgres-4.jpeg" height="119" /><img src="Images/Marquee/imgres-5.jpeg" height="119" /><img src="Images/Marquee/imgres-6.jpeg" height="119" /><img src="Images/Marquee/imgres.jpeg" height="119" /></p>
<p>
<!-- end #mainContent -->
</div>
</p>
<p> </p>
<p> </p>
<div id="footer">
<p> <img src="Images/296268493113.png" width="29" height="29" align="absmiddle" /> | 25521 East Smoky Hill Road, Suite 140, Aurora, CO 80016 </p>
<div><a href="mailto:info@yoursouthlandsmile.com">info@yoursouthlandsmile.com</a></div>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
And here is the code for the style sheet that defines the background: Code:
body {background-image: url(images/background.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;}
|
|||||||