|
CSS - Can You Spot My Problem?
I've been asked to look at the following page:
http://www.nicewag.org.uk/meetings2005.htm The user has a table which for some reason has decided it wants to move miles away from everything else. If you scroll down you'll see what I mean. I can't see what is causing something to repel this table so far down. Can anyone assist? Thanks, Geoff Similar Tutorialshere is a pic of my page and where I wanna put the ad code http://img155.imageshack.us/my.php?image=untitled7ko.gif here is the required adcode for hosting Code: <script type="text/javascript"><!-- google_ad_client = "pub-8531861944410416"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="2267135732"; google_color_border = "660000"; google_color_bg = "7D2626"; google_color_link = "FFFFFF"; google_color_url = "DAA520"; google_color_text = "BDB76B"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> here is my overall header 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" dir="{S_CONTENT_DIRECTION}">
<head>
<script type="text/javascript"><!--
google_ad_client = "pub-8531861944410416";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
google_ad_channel ="2267135732";
google_color_border = "660000";
google_color_bg = "7D2626";
google_color_link = "FFFFFF";
google_color_url = "DAA520";
google_color_text = "BDB76B";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINpt>
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/AcidTech/{T_HEAD_STYLESHEET}" type="text/css">
<script language="javascript" type="text/javascript" src="templates/AcidTech/scripts.js"></script>
<script language="javascript" type="text/javascript" src="templates/AcidTech/formStyle.js"></script>
<link rel="icon" href="templates/AcidTech/images/favicon.ico" />
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
/* window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); */
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body>
<a name="top"></a>
<img id="formStyleTestImage" src="templates/AcidTech/images/spacer.gif" />
<table width="{T_BODY_BACKGROUND}" cellspacing="0" cellpadding="0" border="0" align="center" id="maintable">
<tr>
<td valign="top" class="content-row"><table border="0" width="100%" cellspacing="0" cellpadding="0" id="logotable">
<tr>
<td align="center" class="logorow1"><div class="logorow2"><a href="{U_INDEX}"><img src="templates/AcidTech/images/logo_mid.gif" height="88" alt="{L_INDEX}" /></a></div></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="buttonstable">
<tr>
<td align="center" valign="middle" width="100%" id="header-buttons">
<!-- BEGIN switch_user_logged_out -->
<a href="{U_REGISTER}">{L_REGISTER}</a> •
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="{U_PROFILE}">{L_PROFILE}</a> •
<a href="{U_PRIVATEMSGS}">{L_PRIVATEMSGS}</a> •
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH}">{L_SEARCH}</a> •
<a href="{U_FAQ}">{L_FAQ}</a> •
<a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a> •
<a href="{U_GROUP_CP}">{L_USERGROUPS}</a> •
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="content">
<tr>
<td class="content" valign="top">
<!-- BEGIN switch_user_logged_in -->
<center><div class="pm-{PRIVMSG_IMG}"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div></center>
<!-- END switch_user_logged_in -->
Thanks for taking the time to read my question. I was wondering if there is a way to put a border around the <area> on an image map. They are href's, so I thought something should happen there. I know you can do an image flip, but then I have to have 2 pictures of everything. I'm just thinking on the fly here but is there something you could do in the css with map and link? I tried this in my .css: Code:
area.hborder:hover {
border-style: solid;
border-color: black;
}
and changed my <area> line to include Code: <area class="hborder" sha ... Here is an example of one of my image maps. thanks for your help, Brad Code: <map name="SBMap"> <area shape="rect" coords="9,32,270,63" href="VSADHelpUnReleased.html" title="Help: Enter New Data UnReleased"> <area shape="rect" coords="9,70,198,104" href="VSADHelpReleased.html" title="Help: Edit Data Released"> <area shape="rect" coords="9,112,85,146" href="VSADHelpPrint.html" title="Help: Print"> <area shape="rect" coords="9,150,272,188" href="VSADHelpImport.html" title="Help: Import Farm Names and Codes"> <area shape="rect" coords="9,190,171,228" href="javascript:void(0)" onclick="NewMonth(EventDesc[41])" title="Help: Herd Info"> <area shape="rect" coords="9,230,91,267" href="javascript:void(0)" onclick="NewMonth(EventDesc[42])" title="Help: Close"> </map> does anyone know how i can place my menu on the right spot. this is the website Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. Hi all, I'm a beginner to floating divs etc. so I've been following a tutorial to get what I need and I'm tweaking it here and there. Trouble is I've obviously tweaked something incorrectly. The two column's in the contentHoldingDiv don't line up correctly. Does anyone feel like taking a look at my code and telling me what I've done wrong (any other comments freely welcomed - it's the only way I'll learn). Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="holdingDiv">
<div id="topDiv"><p>You are logged in as <strong>Guest</strong></p></div>
<div id="headerPicDiv">Header Pic</div>
<div id="navDiv">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="contentHoldingDiv">
<div id="contentDiv">
<h2>Column 1</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="rightDiv">
<h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
</div>
<div id="footerDiv">
<p>
Site design by <a href="mailto:Lee@LTheobald.co.uk">Lee Theobald</a>
</p>
</div>
</div>
</body>
</html>
And here's the CSS Code:
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #E6E6E6;
margin: 0px;
padding: 0px;
min-width: 760px;
}
#holdingDiv {
background-color: #F8F8F8;
margin: 20px auto;
width: 760px;
}
#topDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
}
#topDiv p, #topDiv strong {
line-height: 25px;
text-align: right;
padding-right: 5px;
margin: 0px;
font-size: 10px;
}
#headerPicDiv {
height: 125px;
border: 1px solid #D4D4D4;
}
#navDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
line-height: 25px;
padding: 0 5px;
}
#navDiv ul {
margin: 0px;
padding: 0px;
}
#navDiv li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#contentHoldingDiv {
border: 1px solid #D4D4D4;
padding: 0px;
margin: 0px;
clear: both;
}
#contentDiv {
background-color: red;
width: 600px;
float: left;
}
#contentDiv p {
padding: 5px 3px;
margin: 0px;
#rightDiv {
background-color: orange;
width:157px;
margin-left:600px;
}
html>body #rightDiv {
width:160px;
}
#footerDiv {
height: 15px;
background-image: url(images/gradient15.jpg);
border: 1px solid #D4D4D4;
}
#footerDiv p, #footerDiv a {
line-height: 15px;
text-align: center;
font-size: 9px;
margin: 0px;
}
Cheers, Lee When I resize the browser window on this page, the text "onclick" and the Cart and Search text stay in one place while the other text and background move. Why is this happening, I need everything to move together. This only seems to be happening IE, FF and Chrome seem fine. http://makethemoviehappen.com/darix.html Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hi everyone I am very new to making a website using CSS. I use Dreamweaver to help me and don't write the code so I am still learning. APOLOGIES IF I AM BEING STUPID - please be kind! My new website is looking good in all browsers except one web page in IE6 and IE7 where the thumbnail images, instead of wrapping below each other - string out in a long line across the web page. I am using the same class multiple times, and the container # width dimensions have been specified The web page is www"."marcusbunyan"."com/marcuscss/the-symbolic-order/tso-thumbnail.html The code for the relevant section of the web page is Code: <div id="tsothumbnail"> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-a.html"><img src="/assets/images/the-symbolic-order/a-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-b.html"><img src="/assets/images/the-symbolic-order/b-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-c.html"><img src="/assets/images/the-symbolic-order/c-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-d.html"><img src="/assets/images/the-symbolic-order/d-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-e.html"><img src="/assets/images/the-symbolic-order/e-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-f.html"><img src="/assets/images/the-symbolic-order/f-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-g.html"><img src="/assets/images/the-symbolic-order/g-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-h.html"><img src="/assets/images/the-symbolic-order/h-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-i.html"><img src="/assets/images/the-symbolic-order/i-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-j.html"><img src="/assets/images/the-symbolic-order/j-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-k.html"><img src="/assets/images/the-symbolic-order/k-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-l.html"><img src="/assets/images/the-symbolic-order/l-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-m.html"><img src="/assets/images/the-symbolic-order/m-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-n.html"><img src="/assets/images/the-symbolic-order/n-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-o.html"><img src="/assets/images/the-symbolic-order/o-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-p.html"><img src="/assets/images/the-symbolic-order/p-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-q.html"><img src="/assets/images/the-symbolic-order/q-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-r.html"><img src="/assets/images/the-symbolic-order/r-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-s.html"><img src="/assets/images/the-symbolic-order/s-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-t.html"><img src="/assets/images/the-symbolic-order/t-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-u.html"><img src="/assets/images/the-symbolic-order/u-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-v.html"><img src="/assets/images/the-symbolic-order/v-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-w.html"><img src="/assets/images/the-symbolic-order/w-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> </div> and the .css is Code: #container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1053px;
text-align: left;
margin-top: 7px;
height: auto;
vertical-align: top;
overflow: visible;
}
#container #tsothumbnail {
clear: right;
float: left;
height: auto;
width: 600px;
margin-left: 180px;
margin-top: 40px;
margin-right: 220px;
position: relative;
margin-bottom: 30px;
}
#container #tsothumbnail .tsothumbnail {
clear: right;
float: left;
height: 66px;
width: 92px;
position: relative;
}
The html and css both validate. Thankx for your help much appreciated Marcus Hello all. I've just started learning to code because I recently started a business and needed a website. I'm having a few issues. I'm using the 960 Grid System plus a scroller found at queness.com I can't post links here apparently, or I'd show you what I'm using. The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome. IE 6 is screwed beyond understanding. IE 7 Pushes me off the screen and links don't work. And Opera squeezes my text together. I have screen shots if necessary. Here is a link to the site in question: ohmyyoga.com I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect. The link is test2.ohmyyoga.com The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated. Cheers I am currently trying to build a website for a church, and have run into a little css coding problem: It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?) The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css" Any help is greatly appreciated Thank you in advance. So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. Hello (: I'd like to ask for your help. I don't have any experience with CSS and tried to learn how to manage it by myself with online resources, but it still doesn't work at all when I test it, and I'd like to know if you would be able to tell me what I've done wrong. (: My website's address: http://navinames.skxawng.lu In all of my HTML documents, I put the following between <head></head>: <LINK href="http://navinames.skxawng.lu/styles.css" rel="stylesheet" type="text/css"> My finished CSS document looks like this: Code: body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
background-color: #F9F9F9;
}
*
p {
width: 80%;
}
*
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(NNLayout.jpg);
}
*
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
*
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
*
/**************** Pseudo classes ****************/
*
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
*
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
*
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
*
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
*
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
*
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
*
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
*
/************************* ID's *************************/
*
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 5px solid #FF6600;
font-weight: normal;
}
*
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Thank you in advance! I've added a border around my exiting web sites main interface page (all the content gets generated via php inside this page). But I'm having two probelms with the <div> structure that are driving me mad. I've moved all the styles inline and I've taken out almost all the php to make the file more readable. I have two points of confusion. 1) Why is the lower part of the border showing outside the container with the background. 2) How do I get the side parts of the border to fill the entire side. I googled this and have given all the containing div's heights, but every time I give these elemnts height other than the size of the image in the background they shrink to about 20 pixels. Code: Thanks for any help. You can see the real web page at www.greystackcellars.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php print $meta_title ?></title>
<style>
.HeadLine {
clear:both;
background-color: #8c8170;
height: 25px;
text-align: center;
vertical-align: middle;
padding-top: 7px;
color: #FFFF99;
font-size: 14px;
}
.Bottom {
COLOR: #333333;
font-size: 10px;
text-align: center;
clear: both;
background-color: #8C8170;
width: 820;
height: 25px;
padding-top: 7px;
}
</style>
</head>
<body style="margin:0; padding:0; height:100%;" >
<div ID="Container" style="border: solid #8C8170 2px; margin: 0 auto; width: 962px; z-index: 1; height: 100%; background: url(images/background.jpg); background-repeat: repeat;">
<div id="top_decoration" >
<div style="width:54px; height:51px; float:left; background: url(images/label-border-top-left.gif);"></div>
<div style="float:left; width:857px; height:51px; background: url(images/label-border-top-mid.gif);" ></div>
<div style="width:51px; height:51px; float:right; background: url(images/label-border-top-right.gif);" ></div>
</div>
<div id="border_container" style="height:100%; clear:both;">
<div id="left_border" style="height:550px; float:left; width: 20px; background: url(images/label-border-left.gif); background-repeat: repeat;">
</div>
<div id="content_container" style="float:left; width:920px;">
<div id="Banner" style="position:relative; height:150px; width: 100%;">
<div id="YouAreHere"
style="
padding-left: 10px;
float:left;
width:220px;
height: 140px;
">
</div><!-- your are here -->
<div id="logo" style="float:left;">
<IMG src="images/logo.jpg" border="0" alt="Grey Stack Cellars"/>
</div>
<div align="right" style="float:right; padding-right: 20px; height:150px;">
<table height ="100%" width="100%">
<tr><td align="center">
<?php if ($_SERVER['HTTPS'] == 'on')
{
?>
<img src="images/icon-thawte2.gif" alt="Thawte SSL">
<?php
}
?>
</table>
</div>
</div> <!-- banner -->
<div id="headline" style="clear:both; background-color: #8c8170; height: 25px; text-align: center; vertical-align: middle; padding-top: 7px; color: #FFFF99; font-size: 14px; width: 100%;">
<a href="index.php?Page=Home" class="head">Home</a> |
<a href="index.php?Page=Bennett Valley" class="head">Bennett Valley</a> |
<a href="index.php?Page=WineCategory& Category=Current Release Wines" class="head">Buy Wine</a> |
<a href="index.php?Page=People" class="head">Information</a> |
<a href="index.php?Page=ContactUs" class="head">Contact</a> |
<a href="AccountFunctions.php?Mode=Cart" class="head">View Cart</a> |
<a href="index.php?Page=Background" class="head">Trade</a> |
<a href="http://www.greystackcellars.com/HomeGrown/index.php?Page=AccountManager" class="head">My Account</a>
| <a href="AccountFunctions.php?Mode=LogOut" class="head">Log Out</a>
</div><!-- headline -->
<div ID="Wrapper" style="width: 920px; z-index: 1; height: auto; min-height: 400px; vertical-align: top; background: url(images/background.jpg); background-repeat: repeat;"> <!-- This has almost everything -->
<div ID="main" style=" padding: 10px 0px 10px 0px;"> <!-- this has just the padding -->
<div class="DialogTitle" style=" color:#555555;">
<?php print $page_title ?>
</div><!-- page title -->
<?php
if (!file_exists($page_file))
print ("Internal error: File ".$page_file." for Page ".$_REQUEST['Page']. " not found<br>");
else
require_once($page_file);
?>
</div> <!-- main -->
</div> <!-- Wrapper -->
<div class="Bottom">
<a href="index.php?Page=SiteMap" class="bottom-link">Site Map</a> |
<a href="index.php?Page=Terms" class="bottom-link">Terms & Conditions</a> |
<a href="index.php?Page=Privacy" class="bottom-link">Privacy Policy</a> |
<a href="index.php?Page=Gallery" class="bottom-link">Photo Gallery</a>
</div> <!-- Bottom -->
</div> <!-- content_container -->
<div id="right_border" style="float:right; width: 20px;">
<img src="images/label-border-right.gif" width="20" height="555">
</div>
</div> <!-- left and right border_container -->
<div id="bottom_decoration" style="clear:both">
<div style="width:56px; height:56px; float:left; background: url(images/label-border-bot-left.gif);"></div>
<div style="float:left; width:848px; height:51px; background: url(images/label-border-bot-mid.gif);" ></div>
<div style="width:56px; height:56px; float:right; background: url(images/label-border-bot-right.gif);" ></div>
</div><!--bottom decoration-->
</div> <!--Container-->
</body>
</html>
Peter *just moved this from the html forum. Didnt see this one at first.* Ok. So I have been reworking my company's website and have recently came upon a problem. Originally when I was coding, I was using Chrome. I kept checking my progress in Safari, IE8, Firefox, and Opera (or so I thought), and I never had problems. Today when showing my boss, he opened it in IE6 and it looked like crap. Came back to my desk and opened in IE8 and all the divs are screwed up. It looks perfect in the other browsers, just IE. Anyone give me a tip, or help out? Id appreciate it. Been beating my head against a wall trying to figure it out. FYI, none of the links work yet. I am basing this off of "fixed header and footer" code I found he http://limpid.nl/lab/css/fixed/header-and-footer Here is my site: http://margraphics.com/NewSite/History.php html: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAR Graphics - History</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" type="text/css" href="Images/Style.css" />
<meta name = "keywords" content="printing services, brochure printing, book printing, post card printing, printing, digital printing, business card printing, color printing, poster printing, commercial printing, printing company, printing equipment, catalog printing, magazine printing, label printing, brochure printer, book printer, post card printer, business card printer, poster printer, Catalog printer, Magazine printer, Label printer, U-seal, useal, integrated label, integrated card, interplast, business forms, pressure seal, unit sets, manifold forms, business form, cut sheet, cut sheets, continuous forms, labels, label, form/label combinations, digital printing, docutech, on demand printing, commercial printing, direct mail, commercial printing, mailing services, print, forms, documents, printing, variable imaging, one-to-one marketing, personalization, handbooks, manuals, school handbooks, binders, inkjet, barcodes" />
</head>
<body>
<div id="Header" class="Header">
<div id="fullheader">
</div>
<div id="HeaderPane" class="HeaderPane">
<a href="index.php">
<img src="Images/MARlogo.png" alt="MARLogo" border="0" style="position: absolute; left: 134; top: 9;" />
</a>
<div id="Address" style="position: absolute; right: 9; top: 7;" class=" AddressText">
523 South Meyer Avenue
<br />
Valmeyer, IL 62295
<br />
618-935-2111
<br />
800-851-4460
</div>
</div>
</div> <div id="footer">
<div id="NavPaneFade" class="NavPaneFade">
</div>
<div id="NavPane" class="NavPane">
<div id="About" style="position: absolute; left: 95; top: 7;" class=" NavPaneText">
A little about us ...
<img src="Images/Header-Red.png" alt="Red Header Bar" style="position: absolute; left: -6; top: 17;"/>
<br />
<a href="History.php">History</a>
<br />
<a href="News.php">News</a>
<br />
<a href="Equipment.php">Equipment</a>
</div>
<div id="NavPaneWrapper">
<div id="NavPaneContainer">
<div id="What" style="top: 7;" class=" NavPaneText">
What we offer ...
<img src="Images/Header-Green.png" alt="Green Header Bar" style="position: absolute; left: -6; top: 17;"/>
<br />
<a href="Direct.php">Direct Mailing</a>
<br />
<a href="Integrated.php">Integrated Cards/Labels</a>
<br />
<a href="Variable.php">variable/Digital Imaging</a>
<br />
<a href="Forms.php">Forms</a>
<br />
<a href="Labels.php">Labels</a>
<br />
<a href="Warehousing.php">Warehousing</a>
<br />
<a href="Seku.php">Sekur Seal</a>
</div>
</div>
</div>
<div id="Little" style="position: absolute; right: 95; top: 7;" class=" NavPaneText">
A little bit of everything else ...
<img src="Images/Header-Blue.png" alt="Blue Header bar" style="position: absolute; left: -6; top: 17;"/>
<br />
<a href="Contact.php">Contact Us</a>
<br />
<a href="FAQ.php">FAQ</a>
<br />
<a href="OnlineOrder.php">Web ordering</a>
</div>
<div class="prop"></div>
<br />
<div class="clear"></div>
</div>
<div id="fullFooter" class="Footer">
<div id="SiteMap" style="position: absolute; left: 134; top: 4;">
<a href="_blank" class="FooterText">
Home
</a>
|
<a href="_blank" class="FooterText">
Sitemap
</a>
|
<a href="_blank" class="FooterText">
Privacy
</a>
|
<a href="_blank" class="FooterText">
Terms
</a>
</div>
<div id="Copyright" style="position: absolute; right: 134; top: 10;" class=" FooterText">
<span class="FooterText">
Copyright 2010 MAR Graphics
</span>
</div>
<a href="http://www.facebook.com/pages/Valmeyer-IL/MAR-Graphics/326577303828" target="_blank">
<img src="Images/Facebook.png" alt="Facebook" border="0" style="position: absolute; right: 100; top: 3;" />
</a>
</div>
</div>
<div id="Content">
<div class="Rounded-Top">
<div class="Rounded-Bottom">
<div class="Rounded-Left">
<div class="Rounded-Right">
<div class="Rounded-BottomLeft">
<div class="Rounded-BottomRight">
<div class="Rounded-TopLeft">
<div class="Rounded-TopRight">
<dl class="ContentPaneHeader">
<dt>Now celebrating our 49th year of providing print solutions to distributors/brokers nationwide!</dt>
<dd class="ContentPaneContent">
<table width="100%" border="0" cellspacing="4">
<tr>
<td width="81%" height="133" class="ContentPaneContent">
In March of 1961, Myron A. Roever started a printing company in a garage in East St. Louis, IL. Almost 50 years later, MAR Graphics continues to provide printing services to brokers nationwide. Through it all, we have prided ourselves in offering high quality and timely delivery. Now, in the 21st century, we continue to maintain that quality and speed in every product line we offer.
</td>
<td width="19%" height="133">
<img src="Images/marm1.jpg" width="204" height="129" alt="Myron Roever"/>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="4">
<tr>
<td width="18%" height="152">
<img src="Images/marm2.jpg" width="222" height="148" alt="Printing Press"/>
</td>
<td width="82%" height="152" class="ContentPaneContent">
MAR Graphics began as a unit set manufacturer under the name MAR Business Forms almost 50 years ago. In 1994, we changed our name to MAR Graphics to better reflect the products and services we now offer. Over the years,
we have added other capabilities to our wide selection of web and sheet-fed presses, including flexographic label printing and digital printing. We now offer direct mail and commercial printing capabilities that expand the product mix we offer to the network of business printing distributors that we supply.
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="4">
<tr>
<td width="75%" height="144" class="ContentPaneContent">
MAR Graphics is located in Valmeyer, Illinois, just outside St. Louis, Missouri. We offer a wide variety of printed products to forms distributors nationwide. MAR Graphics operates 14, 17, 22 and 28 inch presses capable of printing up to 10 colors, and our extensive digital imaging and bindery departments offers a multitude of value added features that make our documents and forms stand out from the rest. However, our most valuable resource is our staff of experienced and dedicated employees, who work hard to produce a high quality product in a fast and efficient manner.
</td>
<td width="25%" height="144">
<img src="Images/buildingfromair.JPG" width="210" height="140" alt="MAR at present"/>
</td>
</tr>
</table>
</dd>
</dl>
<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-11509100-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css: Code: body {
padding-bottom: 280px;
padding-left: 20px;
padding-right: 20px;
padding-top: 130px;
background-color: #F3F3F3;
}
div#header {
height: 110px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
div#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 280px;
bottom: 0px;
}
@media Screen {
BODY > DIV#header {
position: fixed
}
BODY > DIV#footer {
position: fixed
}
}
* HTML BODY {
overflow": hidden
}
* HTML DIV#content {
height: 100%;
overflow: auto;
}
#fullheader {
height: 20px;
position: absolute;
top: 0;
width: 100%;
background-color: #F3F3F3;
}
#HeaderPane {
background-image: url(Blue-Bar.png);
background-repeat: repeat-x;
height: 90px;
position: absolute;
top: 20px;
width: 100%;
}
#NavPane {
height: 240px;
position: absolute;
bottom: 20px;
width: 100%;
background-color: #3F3F3F;
}
#NavPaneFade {
background-image: url(FadetoTop.png);
background-repeat: repeat-x;
position: absolute;
top: 10px;
width: 100%;
}
#NavPaneWrapper {
right: 50%;
position: absolute;
top: 7px;
}
#NavPaneContainer {
left: 50%;
position: relative;
}
#fullfooter {
height: 30px;
position: absolute;
bottom: 0;
width: 100%;
background-color: #F3F3F3;
border-top: thick;
border-top-color: #3F3F3F;
border-top-style: solid;
}
.AddressText{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #f7f5f0;
font-weight: bolder;
text-decoration :none;
}
.NavPaneText {
font-family: Arial, Helvetica, sans-serif;
font-size: 16.5px;
color: #F3F3F3;
font-weight: bolder;
text-decoration :none;
}
.FooterText {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #3F3F3F;
font-weight: normal;
text-decoration:none;
}
a:link {
color: #F3F3F3;
text-decoration:none;
}
a:visited {
color: #c8c8c8;
text-decoration:none;
}
a:hover {
color: #F3F3F3;
text-decoration:none;
}
a:active {
color: #F3F3F3;
text-decoration:none;
}
#fullFooter a:link {
color: #3F3F3F;
text-decoration:none;
}
#fullFooter a:visited {
color: #3F3F3F;
text-decoration:none;
}
#fullFooter a:hover {
color: #3F3F3F;
text-decoration:none;
}
#fullFooter a:active {
color: #3F3F3F;
text-decoration:none;
}
.ContentPaneHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #075fa3;
font-weight: 900;
}
.ContentPaneSubHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #5caf70;
font-weight: 900;
}
.ContentPaneContent {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #3F3F3F;
font-weight: 700;
}
/* Creating the 'notepad' look */
.Rounded-Top {
background: url(Rounded-Dot.png) 0 0 repeat-x;
background-color: #f1f0ec;
overflow: auto;
}
.Rounded-Bottom {
background: url(Rounded-Dot.png) 0 100% repeat-x
}
.Rounded-Left {
background: url(Rounded-Dot.png) 0 0 repeat-y
}
.Rounded-Right {
background: url(Rounded-Dot.png) 100% 0 repeat-y
}
.Rounded-BottomLeft {
background: url(Rounded-BottomLeft.png) 0 100% no-repeat
}
.Rounded-BottomRight {
background: url(Rounded-BottomRight.png) 100% 100% no-repeat
}
.Rounded-TopLeft {
background: url(Rounded-Topleft.png) 0 0 no-repeat
}
.Rounded-TopRight {
background: url(Rounded-TopRight.png) 100% 0 no-repeat;
padding-left: 20px;
padding-right: 30px;
padding-top: 40px;
padding-bottom: 30px;
}
Hi, I resolved the problem I was having before - thank you for the help. Now I have a new problem. If you look at the url www.northshorewebdesign.net/testsite/about, you'll see the sub page navigation on the left. The spacing netween the list items changes when you goe to a sub page - it wasn't doing that before. I have no idea what is causing it. Can anyone determine what would cause this? I checked using firebug and the items are associated with the correct css and this wasn't happening before |
|||||||