|
CSS - Strangest Problem I've Seen: Ie Bug, Or Not?
Hi,
I'm using a Mambo system but creating the template at the moment. All was fine until I had to use a Mambo menu and style a particular menu icon. i.e. a selected menu icon is marked: <a.... class="mainlevel" id="active_menu" >my link</a> So I used the following style to highlight this: Code:
a#active_menu.mainlevel {
background: #9595C9;
color: #FFFFFF;
}
It works - but, here's the strange part: I copied and pasted all my HTML into a "z.html" file to make this as easy to debug as possible. Here it is: http://www.pip.lk/z.html - If I view that with IE 6.0, the Newsletter link (bottom left) is supposed to be highlighted but it isn't. http://jaysonsgroup.com/zpip/z.html - The same EXACT html file, just on a different account within the same server. The html file even references the same URL of the original site above, so both html files share the same stylesheet. This, on IE, highlights the newsletter link correctly. It can't be a style problem, can it? It works on one account, it doens't on another. If - for some reason - you CAN see the newsletter link highlighted on this page: http://www.pip.lk/z.html - then there's obviously something wrong with my own machine and not the site itself. Please let me know. Thanks very much! Similar TutorialsHi, Please use Firefox and look at: https://67.18.220.222/~duoboots/secure/test_start.php Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content. However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars. Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it! Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars. I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>. Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted. Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it? Some CSS: Code:
table.oa_results {
border: 1px solid #C9AA90;
border-collapse: collapse;
width: 310px;
}
table.oa_results td {
border: 1px inset #C9AA90;
padding: 2px 2px 2px 4px;
}
table.oa_results th {
border: 1px inset #C9AA90;
padding: 2px 4px;
font-weight: bold;
text-align: left;
}
.whitebox_general_oa {
width: 387px;
background: #FFFFFF;
line-height: 18px;
overflow:visible;
display: block;
clear: both;
}
Thanks very much! 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. 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! 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. 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 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 know that IE6 has floating issues, just I was wondering if there was a way around this problem. Everytime I make a 2 column page they dont line up correctly in IE6. http://monarkstudios.ca/contact/ On IE7 or Firefox they work great. I was having a problem with IE7, and I adjusted the widths and it fixed it for that. Any solution or way around it? Thanks. Hi to all Can anyone help me how to identify browser in css and apply css according to the browser for example // if Browser is IE 7 .test { font-size:10px } // if Browser is IE 8 .test { font-size:12px } Is this is possible . i found this code but it does not work for iE 7 or IE 8 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6hacks.css" /> <![endif]--> thanks Here is the link to the webpage The in the 2nd section, the Pharma Newsletter heading is to the right instead of the left and I can not figure out how to fix it. I have tried text align and other things, but can not figure out how to fix it without causing even more problems. It is perfect in IE 7 and FF. Here is the html: Code: <h1>Vitalink Newsletter</h1>
<div class="serviceblock lineright"> <a href="../pdf_library/newsletter/Vitalink_Volume_3.pdf" target="_blank"><img src="../images/resources/vitalink-3.jpg" alt="Vitalink Volume 3" /></a>
<div class="parea100">
<h1>Vitalink Volume 3</h1>
<p>Quality Spirometry for Clinical Trials</p>
<p>Over-reading - The Quality Game</p>
<p>(PDF 348 KB)</p>
</div>
<a href="../pdf_library/newsletter/Vitalink_Volume_3.pdf" target="_blank" class="morelink">Download</a>
</div>
<div class="serviceblock lineright"> <a href="../pdf_library/newsletter/Vitalink_Volume_2.pdf" target="_blank"><img src="../images/resources/vitalink-2.jpg" alt="Vitalink Volume 2" /></a>
<div class="parea100">
<h1>Vitalink Volume 2</h1>
<p>Introducing the New <br />
ATS/ERS Guidelines</p>
<p>Spirometry Training is Essential</p>
<p>(PDF 583 KB)</p>
</div>
<a href="../pdf_library/newsletter/Vitalink_Volume_2.pdf" target="_blank" class="morelink">Download</a>
</div>
<div class="serviceblock"> <a href="../pdf_library/newsletter/Vitalink_Volume_1.pdf" target="_blank"><img src="../images/resources/vitalink-1.jpg" alt="Vitalink Volume 1" /></a>
<div class="parea100">
<h1>Vitalink Past Issues</h1>
<p><a href="../pdf_library/newsletter/Vitalink_Volume_1.pdf" target="_blank">Volume
1<a></p>
</div>
<a href="#" target="_blank" class="morelink"></a> </div>
<div id="pharma">
<h1>Pharma Newsletter</h1>
</div>
<div class="serviceblock lineright"> <a href="../pdf_library/newsletter/pharma_april2006.pdf" target="_blank"><img src="../images/resources/pharma_newsletter_apr.jpg" alt="Pharma April 2006" /></a>
<div class="parea85">
<h1>Pharma April 2006</h1>
<p>The Pharma Newsletter provides up to date information on Vitalograph's
latest respiratory clinical trials products and services. (PDF 49 KB)</p>
</div>
<a href="../pdf_library/newsletter/pharma_april2006.pdf" target="_blank" class="morelink">Download</a>
</div>
<div class="serviceblock lineright"> <a href="../pdf_library/newsletter/pharma_newsletter_Jan2006.pdf" target="_blank"><img src="../images/resources/pharma_newsletter_jan.jpg" alt="Pharma January 2006" /></a>
<div class="parea85">
<h1>Pharma January 2006</h1>
<p>The Pharma Newsletter provides up to date information on Vitalograph's
latest respiratory clinical trials products and services. (PDF 76 KB)</p>
</div>
<a href="../pdf_library/newsletter/pharma_newsletter_Jan2006.pdf" target="_blank" class="morelink">Download</a>
</div>
Here is the css: Code: #main {
float:left;
width:675px;
border-left:1px dotted #999999;
padding:0px 0px 0px 31px;
color:#0ab0f0;
margin:0px 0px 0px 11px;
position: relative;
}
#main h1 {
font-weight:normal;
padding-bottom:0px;
margin-bottom:0px;
color:#0ab0f0;
text-align: left;
}
#pharma h1 {
font-weight:normal;
color:#0ab0f0;
}
.serviceblock {
width:200px;
float:left;
margin:10px 0px 0px 0px;
}
.linerightnav {
border-right:1px dotted #999999;
margin:0px 20px 0px 0px;
}
.lineright {
border-right:1px dotted #999999;
margin:10px 20px 0px 0px;
}
I did not create the website, but I am not responsible for fixing it. Any help or a point in the right direction how to fix this would be greatly appreciated. Thanks! Hi, i having some problems with some css code, it looks ok with FF but in IE he design looks bad. I have cked with WC3 Validator and it pass the tests. Anyone have some ideeas abut fixing that. Thanks. Code: * {
margin: 0;
padding: 0;
}
body {
background: #f4bd27 url('images/background__ornoment.png');
color: #323232;
font: 11px verdana;
padding: 25px 0;
}
div.background__gradient {
background: url('images/background__gradient.png') repeat-x;
height: 800px;
min-height: 1px;
width: 100%;
margin: -25px 0 0 0;
position: absolute;
z-index: -9999;
}
a {
color: #323232;
border-bottom: 1px dotted #969696;
text-decoration: none;
}
a:hover {
color: #646464;
}
a img { border: none; }
img { margin: 3px 0; }
h3 {
border-bottom: 1px solid #c8c8c8;
margin: 0 0 3px 0;
padding: 0 0 3px 0;
}
h3 a { border: none; }
hr {
border: 0 none #ffffff;
border-top: 1px solid #c8c8c8;
clear: both;
display: block;
height: 1px;
margin: 3px 0;
}
ul, ol { padding: 0 15px; }
div.clearBoth { clear: both; }
div.small { font-size: 9px; }
textarea {
margin: 3px 0;
width: 702px;
}
div.container {
margin: auto;
width: 968px;
}
div.header {}
div.header__logo {
background: url('images/header__logo.png');
height: 77px;
margin-left: -7px; /* !!! */
width: 188px;
}
h2.navigation {
left: -9999em;
position: absolute;
}
.navigation ul {
margin: 0;
overflow: hidden;
padding: 0;
}
.navigation li {
float: left;
list-style: none;
}
.navigation a {
border: 0;
display: block;
float: left;
height: 37px;
margin-top: -37px;
overflow: hidden;
text-indent: -9999em;
}
#navigation__sakums a {
background: url('images/navigation/sakums.png');
margin-left: 166px;
width: 112px;
}
#navigation__sakums a:hover {
background: url('images/navigation/sakums.png');
background-position: 0 37px;
margin-left: 166px;
width: 112px;
}
#navigation__blogs a {
background: url('images/navigation/blogs.png');
margin-left: 278px;
width: 95px;
}
#navigation__blogs a:hover {
background: url('images/navigation/blogs.png');
background-position: 0 37px;
margin-left: 278px;
width: 95px;
}
#navigation__galerija a {
background: url('images/navigation/galerija.png');
margin-left: 373px;
width: 114px;
}
#navigation__galerija a:hover {
background: url('images/navigation/galerija.png');
background-position: 0 37px;
margin-left: 373px;
width: 114px;
}
#navigation__pamacibas a {
background: url('images/navigation/pamacibas.png');
margin-left: 487px;
width: 132px;
}
#navigation__pamacibas a:hover {
background: url('images/navigation/pamacibas.png');
background-position: 0 37px;
margin-left: 487px;
width: 132px;
}
#navigation__dg-studija a {
background: url('images/navigation/dg-studija.png');
margin-left: 619px;
width: 132px;
}
#navigation__dg-studija a:hover {
background: url('images/navigation/dg-studija.png');
background-position: 0 37px;
margin-left: 619px;
width: 132px;
}
#navigation__kas-esmu a {
background: url('images/navigation/kas-esmu.png');
margin-left: 751px;
width: 133px;
}
#navigation__kas-esmu a:hover {
background: url('images/navigation/kas-esmu.png');
background-position: 0 37px;
margin-left: 751px;
width: 133px;
}
div.header__rss {
background: url('images/header__rss.png');
height: 58px;
margin-top: -58px;
margin-left: 899px;
width: 69px;
}
div.wrap__top {
background: url('images/wrap__top.png');
height: 11px;
}
div.wrap { background: url('images/wrap.png'); }
div.wrap__gloss {
background: url('images/wrap__gloss.png');
height: 91px;
position: absolute;
margin: -76px 0 0 5px;
width: 958px;
}
div.content {
margin: auto;
width: 928px;
}
div.wrapWindows {
float: left;
z-index: 1; /* DON'T WORK! */
}
div.windows {
margin: auto;
width: 736px;
}
div.windows__top {
background: url('images/windows__top.png');
height: 15px;
}
div.windows__middle {
background: url('images/windows__middle.png');
}
div.windows_ {
margin: auto;
padding: 0 0 6px 0;
width: 706px;
}
div.windows__bottom {
background: url('images/windows__bottom.png');
height: 31px;
}
div.wrapSidebar {
float: right;
z-index: 1; /* DON'T WORK! */
}
div.sidebar {
margin: auto;
width: 188px;
}
div.sidebar__top {
background: url('images/sidebar__top.png');
height: 15px;
}
div.sidebar__middle {
background: url('images/sidebar__middle.png');
}
div.sidebar_ {
margin: auto;
padding: 0 0 6px 0;
width: 158px;
}
div.sidebar__bottom {
background: url('images/sidebar__bottom.png');
height: 31px;
}
div.bullet {
background: url('images/bullet.png');
float: right;
height: 16px;
margin: 5px 10px 0 0;
width: 16px;
}
div.footer {
background: url('images/footer.png');
height: 109px;
width: 968px;
}
div.footer__twitter_com {
background: url('images/footer__twiiter_com.png');
float: right;
height: 46px;
margin: 19px 32px 0 0;
width: 98px;
}
div.footer_ {
padding: 27px 0 0 46px;
}
div.headerSearch {
width:200px;
height:25px;
position:absolute;
right:500px;
background:url(./images/headerSearch.png) no-repeat 0 0;
height: 30px;
margin-top: 9px;
overflow: hidden;
text-indent: -9999em;
}
.searchQuery {
display:block;
float:left;
padding:6px 5px 5px 10px;
width:117px;
height:14px;
font-size:11px;
border:0;
color:#333;
background:none;
}
.searchQueryIA {
color:#666;
font-style:italic;
}
.searchButton {
display:block;
float:left;
margin-left:-7px;
width:20px;
height:25px;
padding:0;
border:0;
background:none;
text-indent:-1000px;
cursor:pointer;
}
*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;
}
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 Here is the webpage I am working on: http://sulley.dm.ucf.edu/~ebuccianti/iesucks/ As you can see, I have three different DIVs here, the yellow, then the orange, then another yellow. The first yellow is supposed to stop at the same vertical point as the "websites" image. It works fine in Firefox and Opera, but if you view it in Internet Explorer, you will see that the first yellow goes on a little longer than it is supposed to. What can I do to fix this? Here is the CSS stylesheet I used: http://sulley.dm.ucf.edu/~ebuccianti/iesucks/includes/style.css i am making a website....and i am new to css.....so i don't know how to correct the problem.....! my problem is of margin.....my website layout gets affected by different web browsers...! my layout gets affected when some one restores the window...! please help...! here is my css code...: Code: body, ul, ol, li, p, h1,h2, h3, h4, h5, h6, form, blockquote{
margin:0px;
padding:0;
}
body{
margin: 60px 0px 0px 180px;
font: normal 11px Verdana,Arial,Helvetica,sans-serif;
color:#333333;
background-position:top left;
background: #202020 url(images/bgr.jpg) no-repeat;
background-position: center top;
}
#top{
position:relative;
margin:0 auto;
width:980px;
background-repeat:no-repeat;
background-position:0 29px;
}
#head{
height:120px;
position:relative;
}
#start{
height:40px;
position:relative;
background-image:url(images/start.png);
background-repeat:no-repeat;
width: 980px;
}
#main{
position:relative;
float:left;
width:960px;
padding-left:10px;
padding-right:10px;
border-left: 1px solid #232a36;
background-image:url(images/line.gif);
background-repeat:repeat-y;
}
#top .content{
position:relative;
float:left;
width:640px;
margin-right:20px;
}
.sidebar{
position:relative;
top:-155px;
right:205px;
float:right;
width:300px;
background-color: #ffffff;
}
.sidebar-footer{
position:relative;
top:-129px;
right:-95px;
float:right;
width:300px;
background: #1C2634 url(images/sidebar-footer.jpg) no-repeat scroll center top;
height: 10px;
}
.bsa{
position:relative;
float:left;
width:278px;
padding: 10px;
}
.bsa2{
position:relative;
float:left;
width:278px;
background: #FFFFFF url(images/advertiser.jpg) repeat-y;
border-right: 1px solid #3b73a5;
border-bottom: 1px solid #3b73a5;
margin-bottom:1px;
padding: 15px;
}
.footer{
position:relative;
clear:both;
width:928px;
top:-40px;
padding:40px 20px 20px 20px;
background-image:url(images/footer-top.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left:1px;
float:left;
}
.footer_meta{
text-align:center;
margin:5px 0 ;
clear:both;
}
/*--------------------head--------------------*/
#head h1 a{
top:1px;
left:20px;
text-indent:-9999px;
position:absolute;
outline:none;
width:380px;
height:100px;
z-index:2;
}
.description{
position:absolute;
top:0;
text-indent:-9999px;
}
/*------------------content--------------------*/
.breadcrumb, .entrys, .featured_entry, .featured_entry2, .navigation{
width:600px;
line-height:34px;
background-image:url(images/bg_box_content.jpg);
background-repeat:no-repeat;
background-position:top left;
border:1px solid #b2b2b2;
background-color:#fff;
padding:0 20px;
margin-bottom:14px;
position:relative;
float:left;
}
.entrys{
line-height:22px;
padding:20px;
}
/*------------------top menu--------------------*/
div#navHeader {background: url(images/bg_skeletonTop.png) no-repeat 0px 45px; height: 90px; position:relative;}
ul#menu {margin-left: 20px;}
ul#menu li {float:left; margin-right: 5px; list-style: none;}
ul#menu li a {display: block; color:#FFFFFF; font-size: 1.25em; font-weight: bold; text-decoration: none; height: 45px; padding: 1px 0 0 20px; float:left;}
ul#menu li a:hover {color:#00a2ff;}
ul#menu li a span {display: block; padding:12px 20px 31px 0px; }
ul#menu li.navSelected a, ul#menu li.current-cat a, ul#menu li.current-cat-parent a {background: url(images/bgnavLeft.png) no-repeat scroll 0 1px; color:#fff}
ul#menu li.navSelected a:hover, ul#menu li.current-cat a:hover {color:#f2f2f2;}
ul#menu li.navSelected a span, ul#menu li.current-cat a span, ul#menu li.current-cat-parent a span {background:url(images/bgnavRight.png) no-repeat top right;}
#subMenu {clear:both;}
#subMenu ul {font-size: 0.9em; font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial; }
#subMenu ul {position:absolute; padding: 8px 0 8px 0; bottom:0; left:20px}
#subMenu ul li {float:left; margin-right: 10px; color:#7c8d93; list-style: none;}
Hi again! I have been trying to solve this problem for a while no, but with no success. You can see the problem he http://files.upl.silentwhisper.net/upload0/divgap.JPG The html-code: Code: <a href="bildvisning.php?id=<?=$bildId?>" target="_blank"><img src="http://www.tibproduktion.se/allabilder/<?=$miniatyr?>" border="1"></a> And the CSS: Code:
div.img
{
padding:1em;
width:160px;
border:1px solid #e0e0e0;
background-color:#fbfbfb;
margin-bottom:1em;
margin-right:2em;
float:left;
text-align: center;
cursor: pointer;
}
div.img:hover
{
border:1px solid #c0c0c0;
background-color:#e0e0e0;
}
div.img img { border:0; }
It helps to fix the height to for example 100px, but the problem is that I have thumbnails with other dimensions, so I would prefer not to have a fixed height. Any ideas? After hours of pain in my head and probing to get my leftmenu 100% height of my contentbox... I need some help i think... http://www.ipan.be/dev (the bad result with leftmenu not 100%) http://www.ipan.be/dev/styles/ipan.css http://www.ipan.be/dev/styles/ipan_news.css any solution to get the thing that is making me crazy working? Hi, I am very stuck with the following issue: I already have a page with layout.css and there is a popup contact form that I like to add to this page which also has its own css file (popup-contact.css). <link rel="stylesheet" type="text/css" href="styles/layout.css"> <link rel="stylesheet" type="text/css" href="styles/popup-contact.css"> When I have it like the above, only the layout.css is run and the form pops up without the style. How can I have the form in its proper style when I already have another css on the same page? Thank you in advanced I am going nuts trying to figure out what's causing my problem... <edit>Links Removed by User</edit> I don't even know how to explain it, other than it works fine in FF. Basically, when the text-area cols are set too large (>40), then the right cells all collapse to the left instead of obeying the specified width of the left cells... It has nothing to do with the colspan, I tried removing it and just having the textarea in the right cell, but it still causes the "squishing" Anyone have an idea? Thanks in advance. 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 I've been looking at this code for awhile , and I'm thinking some fresh eyes might be able to see the problem. This is the page that I'm working on: http://www.mediamogulsweb.com/client/Pristine/index.php This is how the page is supposed to look: http://www.exoload.info/206/1140302493.png I can;t seem to figure out why the subheads (LOGIN, PRISTINE, RECENT PROJECTS) are not lining up on the page (from left to right)... Any help is appreciated... |
|||||||