|
CSS - Top And Left Css Values Only Respond To 0
I'm animating an element and have tried to do a simple css transition in jquery
$("#myelement").css('top','100'); But it wont respond unless that value is 0. I've been using these for months and suddenly 'top' and 'left' no longer respond to JS. Similar TutorialsI'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. 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; }
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;
}
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 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 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'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>
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..... 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? 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 Morning everyone. I am trying to create a background image that I can create a repeat from right to left so that people with very large monitors get a consistent looking background. I have no problem repeating from left to right with repeat-x but now I need to go right to left. How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) G'day all, I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border. I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning. How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen. This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right. http://www.ausvirtual.com/Website%20copy.jpg Cheers. 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 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. Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 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 |
|||||||