|
CSS - It's Live.... Only One Issue Left!
Right,
I've made it live and only one issue (apart from a lot of tidy up work to do!) Now I have converted from tables to CSS, the tables perform funny in the layout. If you go to the site: www.generating-sets.com The home page looks fine, if you select the top link 'about us' the page goes all over! Now, the reason i think is because there is a table in that page displaying the data. Now the table has width='100%' because i wanted it previously to fill all availible space. Now however, it sets its width to that of the screen! (and hence buggers my CSS!) So what should i do to the table to force the width to fill the content box, but not go over the sides? Charlie Similar Tutorialsthe 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB Does anyone know any good IRC channels where I could get some "live" CSS help? 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;}
WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! hi everyone i would appreciate any help or suggestions! i am using assistly's templates for my portal which is right-to-left. i have succeeded in altering most of the portal correctly, however, some of the <li> bullet points and icons are still showing up as left-to-right. you can see the problem on my portal site he help.cbtisrael.com i have tried changing adding dir: rtl; to every possible css option, but to no avail. if you have any other suggestions for moving the icons and bullet points to the right, please let me know! thanx ============================== here is some of the relevant css code: Code: /* Support Main Column */
#support-main {
float: right;
width: 700px;
}
#support-main .support-body {
background: #FFF;
border: 1px solid #CCC;
-moz-box-shadow: 0 3px 4px #CCC;
-webkit-box-shadow: 0 3px 4px #CCC;
}
#support-main .content {
overflow: hidden;
padding: 20px;
}
/* Support Main Column Headers */
#support-main h3 {
border-bottom: 1px solid #DDD;
margin: 0 0 20px;
padding: 0 0 20px;
}
#support-main h4 {
margin: 0 0 30px;
}
#support-main h5 {
margin: 0 0 9px;
}
#support-main h5 a {
background: #EEE;
color: #666;
font-size: 11px;
padding: 3px 7px;
margin: -2px 0 0 9px;
position: absolute;
text-decoration: none;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
}
/* Dashboard */
#support-main .dashboard h5 a:hover {
text-decoration: none;
color: #FFF;
background: #254689;
}
#support-main .dashboard td {
border-bottom: 1px solid #CCC;
padding: 20px 0 10px;
}
#support-main .dashboard .row1 td {
padding: 0 0 10px;
}
#support-main .dashboard .last td {
border-bottom: none;
}
#support-main .dashboard .topic {
margin: 0;
}
#support-main .dashboard .topic ul {
color: #254689;
margin: 0 15px 20px 0;
list-style: none;
}
#support-main .dashboard .topic li {
background: url('{{ "/images/portal/featured-bullet.png" | portal_image_url: image_asset_host }}') -2px 5px no-repeat;
margin: 0 0 5px;
padding: 0 0 0 15px;
}
#support-main .dashboard .topic li.featured a {
background: #FAFBCA;
font-weight: bold;
}
#support-main .dashboard h5 {
background: url('{{ "/images/portal/icon-types-small.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat;
height: 16px;
font-size: 13px;
text-transform: uppercase;
padding: 0 0 0 20px;
}
#support-main .dashboard h5.questions {
background-position: 0 -109px;
}
/* Article Lists */
#support-main .articles ul {
list-style: none;
}
#support-main .articles h4 {
margin: 0 0 5px;
font-weight: normal;
}
#support-main .articles li {
margin: 0 0 30px;
}
#support-main .articles li.question {
background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 3px no-repeat;
padding: 0 0 0 40px;
}
#support-main .articles li.article {
background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 -276px no-repeat;
padding: 0 0 0 40px;
}
#support-main .articles li.question.featured {
background-position: 0 -138px;
}
#support-main .articles li.article.featured {
background-position: 0 -415px;
}
#support-main .articles li.featured h4 a {
font-weight: bold;
background: #FAFBCA;
}
#support-main .articles li p {
margin: 0 0 5px;
color: #777;
}
#support-main .articles .condensed {
background: #FFFDF4;
border: 1px solid #E3DEBF;
margin: 0 0 30px;
padding: 20px 20px 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#support-main .articles .condensed li {
margin: 0;
padding: 0;
}
#support-main .articles .condensed h4 {
font-size: 15px;
}
#support-main .articles .condensed p {
margin: 0 0 20px 30px;
color: #777;
}
#support-main .articles .condensed a {
margin: 0 0 20px 30px;
}
I have a dynamic site I am developing. http://www.rubberducktech.com/software/eDeli2/Menu.php along the top there was an issue with a gap on the left and the right (Using IE6). I got the gap fixed on the left using * html #mainLogo{ margin-left: -3px; margin-right: -2px;/*this doesn't work*/ } which I found here in the forum. But, I cannot seem to get the right side gap to go away. Here is the code #header{ font-size:90%; color:#ffffcc; font-weight:bold; } #mainLogo{ background-image:url(../images/logo-span.png); background-repeat:repeat-x; margin-top:10px; height:140px; } Hi there, I have a left coloumn that is used for my navigation. However, I want it to go all the way down the page so it is the same height as my content div. I have tried the following, but it is not working. PHP Code: float: left; width: 200px; background-color: #070c12; padding: 15px; height: 100%; Any ideas? Thanks I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
http://balmarketing.com/new/ I think actually the trouble lies in my content layer not centering itself correctly and its being pushed to the right by the nav layer. It looks semi what I want it to look like in FF but not in IE. Any suggestions on how I can fix this? Thanks for taking the time to read my question. I have a container that is floated left. I've put a margin-left: 80px; on it. the 80px seems to be quite a bit bigger in IE(6) than in FF. The page works well in FF but craps out in IE. I can't figure out what's going on here. In my body{} I have margin: 0px; and padding: 0px; Any ideas? Brad I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is .... ============================================ =[blah blah] (lot of spaces here) [blah blah]= ============================================ Code:
div.divTop
{
margin: 0px;
padding: 8px 0px;
width: 600px;
color: #000000;
font-weight: normal;
font-family: verdana;
font-size: 10pt;
font-style: normal;
text-indent: 20px;
}
span.spanTitle1
{
font-size: 16pt;
}
span.spanTitle2
{
font-size: 10pt;
}
[code]
[code]
<div class="divTop">
<span class="spanTitle1">blah blah1</span>
<span class="spanTitle2">blah blah2<img src="....."></span>
</div>
Edit: Can't make the ASCII text work here..... Good day, I am trying to create the website of my uncle.. Since the .css file is inside my table built website everything moved to the right: here is the website.. everything is moved to the left.. but why? tinyurl.com/wontcenter So I have this code... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0 1em;
padding:0;
width:775px;
}
#header {
background:blue;
margin-bottom:1em;
padding:1em;
}
#header h1, #header p {
margin:0;
padding:0;
color:white;
}
#menu {
width:150px;
z-index:50;
}
#menu ul {
list-style-type:none;
margin:0;
padding:0;
text-align:center;
border-top:solid thin orange;
}
#menu li {
border-bottom:solid thin orange;
}
#menu a {
padding:.5em 0;
text-decoration:none;
display:block;
background:white;
color:black;
}
#menu a:hover {
font-weight:bold;
background:blue;
}
#pagebody {
margin-left:175px;
margin-top:-450px;
}
#pagebody h2 {
margin:0;
}
</style>
</head>
<body>
<div id="header">
<h1>Test Page</h1>
<p>Tagline goes here!</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Employees</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Request Information</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Make a payment</a></li>
</ul>
</div>
<div id="pagebody">
<h2>Page Header and other information</h2>
</div>
</body>
</html>
As you can see I am using a left margin and a negative top margin to position the page body next to the menu. This is the first time I've done it this way. In the past I've used floats (either floating the content, and putting a margin on the menu, or floating the menu and putting a maring on the content.) This method does not work in IE7 as the menu's links are not selectable. That doesn't necessarily mean this is the wrong way to do it... but, I was looking for opinions and suggestions as to what's the "right" way to accomplish this so that development and maintenance is easy... the content and menus are self contained (i.e. they don't or at least only minimally affect each other)... and it works cross browser. Thanks Bryan i want to place an image relative to the top left of an element. is that possible in css? i've been looking everywhere, but i can't find anything about having two properties in one element. |
|||||||