|
CSS - Left Align + Flash Anim + Ie
Can't get flash anim to line up with left hand margin in IE. FF & Op fine. It's about 15px indented in IE. Don't have anything online - extract of code below... Anything obvious?
Many thanks: <div id="movie_position"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" id="Movie1" width="500" height="328" > <param name="movie" value="Movie1.swf"> <param name="wmode" value="transparent"> <param name="bgcolor" value="#FFFFFF"> <param name="quality" value="high"> <param name="allowscriptaccess" value="samedomain"> <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie1" width="500" height="350" src="Movie1.swf" bgcolor="#FFFFFF" quality="high" swliveconnect="true" allowscriptaccess="samedomain" wmode="transparent"> <noembed> </noembed> </embed> </object> </div> AND THE RELEVANT CSS: #container { margin:0 auto; width: 760px; text-align:left; } body { margin:0px; padding:0px; text-align: center; background-color :#FFF; font-family: verdana, arial, sans-serif; color: #000; line-height: 16pt; } h1 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 15pt; text-align: justify; } h2 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 24pt; text-align: justify; padding: 20 0 0 0; } #movie_position { position: relative; left: 0; } Similar TutorialsI have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? I used a form generator online that utilizes CSS and PHP. I am very comfortable with programming; but, I have never used CSS. I tried tweaking everything I could and no luck changing the CSS to left-align the entire form. I thought they used padding; but, I can't figure out where. Also, I removed the CSS to make sure the alignment wasn't part of the HTML - it is definitely embedded in the CSS as the form left-aligned (just not as attractive). Here is the CSS - apologies for the length. As you will undoubtedly see, this is my first post and I am not sure of your protocols for posting code. body { background:#fffff; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:small; margin:8px 0 16px; text-align:left; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:640px; } #top { display:block; height:10px; margin:10px auto 0; width:650px; } #footer { width:640px; clear:both; color:#999999; text-align:left; width:640px; padding-bottom: 15px; font-size: 85%; } #footer a{ color:#999999; text-decoration: none; border-bottom: 1px dotted #999999; } #bottom { display:block; height:10px; margin:0 auto; width:650px; } form.appnitro { margin:0px 0px 0; padding:0 0 20px; } There is much more CSS; but, I believe the issue is isolated to this section. I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance. Hi all, We have a table layout we're experiencing some issues with on users that have smaller screens. Below is a simple 1 row example of elements contained in our div tables Code:
<div class="tracks-result-page" style="">
<div class="track-element">
<input class="track-select-checkbox" type="checkbox"><h4 class="track-name">Track</h4><span class="created-date">23-Jul-2008 17:13</span><span class="duration">47m</span><a href="#" class="view-button">view</a><a href="/viewtrack" class="edit-button">edit</a><a href="#" class="details-button">show details</a><input value="d5f173a2-b35e-4489-b468-33a05b1e4997" class="track-id" type="hidden">
</div>
<div class="track-element">
....more elements
</div>
</div>
Basically, I have 800 px to fit this data in from our site template. What's happening is on smaller resolutions, the 3 anchor tags aren't fitting in 800 px due to large font size vs table width, and the anchor elements are wrapping around. I have a lot of white space after the description, and currently have a fixed width on that div. What I need is to right align everything from the "created-date" class to the end of the element, then left align the "track-select-checkbox" and the "track-name" elements. I'm having a really tough time doing this for some reason. I can't use "float:right;" on the elements that need right aligned. If I do, they all appear in reverse order! Any help would be greatly appreciated. thanks, Todd When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey 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. Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... 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 Hi, Is it possible to place a div on top of a flash animation? When i place it on top of the flash, it dissapears, but shows up on the rest of the page. this is the code i am using: Code: <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:100; left: 114px; top: 359px; visibility: visible; overflow: visible;"><img src="flap.gif" width="146" height="18"></div> 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; } I am using a basic css layout but i am having a problem when it comes to adding the flash. I need it to stay in the wrapper.here is the code im using :- Code: body {
background-image: url(bg2.jpg); font: 76% verdana,arial,tahoma,helvetica,"sans serif";
}
* {
padding: 0px;
margin: 0px;
}
HTML {
MARGIN-BOTTOM: 1px; HEIGHT: 100%;
}
#wrapper {
MARGIN-LEFT: auto; WIDTH: 700px; MARGIN-RIGHT: auto; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}
ul {
margin-top: 1.1em; margin-bottom: 1.1em; line-height: 130%;
}
ul li {
padding-left: 13px; list-style-type: none; margin: 0px 0px 0.15em 1.5em; color: #327EBE;
}
a {
color: #4f9cef; text-decoration: none;
}
a:visited {
COLOR: #FF9523; TEXT-DECORATION: none;
}
a:hover {
COLOR: #FF9523; TEXT-DECORATION: none; border-bottom: 1px dotted #7CD300;
}
a:active {
COLOR: #333333;
}
#img {
padding-bottom: 0px;
}
#nav {
background-image: url(gradientbg.gif); height: 34px;
padding: 0px 0px 0px 0px;
}
#navlist li {
display: block;
list-style-type: none;
padding: 0px 0px 0px 0px;
font-weight: bolder;
float: left;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
padding: 10px 10px 10px 10px;
font-weight: bolder;
}
#navlist li a:hover {
background-color:#FFFFFF; padding: 12px 10px 12px 10px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
background-color: #FFFFFF;
font-weight: bolder;
}
#col1 {
float: left; WIDTH: 700px;
}
#col1content P {
FONT-SIZE: 10pt; Font-family:tahoma, sans-serif; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 10px; COLOR: #666666; LINE-HEIGHT: 140%; MARGIN-RIGHT: 10px; TEXT-ALIGN: justify;
}
#col1content {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 15px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS", Tahoma;
}
#footer {
CLEAR: both; background-color:#333333; WIDTH: 700px; HEIGHT: 65px; text-align: center; padding-top: 15px; padding-bottom: 0px; BORDER-TOP: #a4d0ed 2px solid;
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #003333; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 20px; PADDING-BOTTOM: 0px; COLOR: #b4aa9e; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H3 {
FONT-SIZE: 20px; PADDING-BOTTOM: 25px; COLOR: #b4aa9e; PADDING-TOP: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; padding-left: 13px;
}
#footer P {
PADDING-LEFT: 15px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 10px; COLOR: #71AB6B; PADDING-TOP: 10px; text-align: center;
}
#footer a {
COLOR: #00cc00; text-align: center; padding-top: 10px; padding-bottom: 0px;
}
#copyright {
font-size: 0.9em; color: #FFFFFF; padding-top: 15px; padding-bottom: 7px;
}
#contentterms {
font-size: 0.8em; color: #FFFFFF;
}
It is when i add the css that it doesnt work the way it should. How would I put the flash into column one without it messing up? The size of the flash is the same width as the column and wrapper. If anyone can point me in the right direction it would be very appreciated. Thanks in advance. I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid. code for flash div= #flash { vertical-align: top; margin: 0; padding: 0; height: 111px; width: 875px; } code for centercol div= #centerCol { margin: 0 auto; padding: 0px; width: 875px; background-color: #ffffff; height: 100%; background:url(top_04.jpg) repeat; } html for embeding= <div id="centerCol"> <div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center"> <PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> some content </div> Thanks. 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 site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6. Does anyone know a fix for this? |
|||||||