CSS - Can't Get Drop Down Arrow To Align To The Right
I've inherited some custom code and I'm working on getting a drop down arrow graphic to show up... I can get it to show up but it is forced to the left of the drop down.
So I have: V |___drop down/select list____| Here is my CSS controlling the dropdown: PHP Code: .dropdownplatform_game { background: url("../images/drop_down18.png") no-repeat scroll 0 0 !important; width: 230px; height: 20px !important; cursor: pointer !important; margin: 0 0 0 30px; } I've tried background: right and background-position: right and when I do that the drop down arrow graphic disappears. Am I missing something simple here? Here is the PHP code for the drop down/list box: PHP Code: <div id="dropdown" class="dropdownplatform_game" onclick="show_dropdown('platform');"> <input id="platform" name="platform" type="text" autocomplete="off" readonly value="<?php echo JText::_('PLATFORM')?> *" size="13%" class="survey_search_inputbox" /> <ul id="dd_list_platform" class="dd_list_game"> <?php for ($i = 0; $n = count($platforms), $i < $n; $i++) { $platform = $platforms[$i]; ?> <li onclick="changeValText('<?php echo $platform->id?>','<?php echo $platform->name; ?>','platform');"> <?php echo $platform->name; ?> </li> <?php } ?> </ul> </div> Works great other than the arrow graphic not lining up. Similar TutorialsHello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect.. If anyone knew how i could fix that I'd really appreciate it! Regards Steven Billings When you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code: .chromestyle{ width: 100%; font-weight: bold; float: left; height: 29px; } .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 0px solid #BBB; width: 100%; background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/ padding: 4px 0; margin: 0; text-align: right; /*set value to "left", "center", or "right"*/ } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #000000; padding: 4px 7px; margin: 0; text-decoration: none; border-left: 1px solid #DADADA; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/ background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/ } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; /*THEME CHANGE HERE*/ border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; } .dropmenudiv a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/ padding: 2px 5px; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a{ /*IE only hack*/ width: 100%; } .dropmenudiv a:hover{ /*THEME CHANGE HERE*/ background-color: #0000ff; color: #fff200; } Sorry if I ask this once before 'cause I don't remember which hack is it for, IE or non-IE... What's the difference between those two below?? Code: html>#wrapper {HEIGHT: auto;} Code: * html #wrapper {HEIGHT: 100%;} Thanks, FletchSOD Hey, so I have a div section where I want links to go, which all have an arrow image before them. I want a bit of space after the image too. Whats the easiest way to set this up? Thanks! Hobby Helper Model Trains The above link is where my problem is... If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange. There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move. Any help will be GREAT!! THANKS! I need help. I want to change the style and errow of list list Menu . Here is HTML CODE: HTML and CSS Syntax : Code: <select id="el01"> <option selected>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> Here is CSS Code: HTML and CSS Syntax Code: #el01 {width:135px; border:1px solid #000000; height:18px} /* Width */ #el02 { /* Text and background colour, blue on light gray */ color:#00f; background-color:#990000; } #el03 {background:url(listmenu.jpg)} /* Background image */ /*#el03 {background-image:url(listmenu.jpg)}*/ /*#el04 {border-width:6px}*/ /* Border width */ #el05 {border:9px dotted #00f} /* Border width, style and colour */ #el06 {border:none} /* No border */ #el07 {font-family:"Courier New",Courier} /* Different font */ #el08 {font-size:2em} /* Bigger text */ #el09 {font-size:0.5em} /* Smaller text */ #el10 {font-weight:bold} /* Bold text */ #el11 {padding:1em} /* Increase padding */ #el12 {text-align:right} /* Change text alignment */ Know i want to change the errow to my designing errow. I want this through CSS, no Jquer involved.I am attaching the image that u want to use . I want to replace default errow image to mine in which two errow pointing up and down. Please help me. I 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%;} Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code: ul#css3menu,ul#css3menu ul{ margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;} ul#css3menu ul{ display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;} ul#css3menu li:hover>*{ display:block;} ul#css3menu li:hover{ position:relative;} ul#css3menu ul ul{ position:absolute;left:98%;top:-2px;} ul#css3menu{ padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;} ul#css3menu li{ display:block;white-space:nowrap;font-size:0;float:left;} ul#css3menu>li,ul#css3menu li{ margin:0 0 0 6px;} ul#css3menu ul>li{ margin:6px 0 0;} ul#css3menu a:active, ul#css3menu a:focus{ outline-style:none;} ul#css3menu a{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;} ul#css3menu ul li{ float:none;margin:0;} ul#css3menu ul a{ text-align:left;} ul#css3menu li:hover>a{ background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)} ul#css3menu img{ border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;} ul#css3menu ul img{ width:16px;height:16px;} ul#css3menu img.over{ display:none;} ul#css3menu li:hover > a img.def{ display:none;} ul#css3menu li:hover > a img.over{ display:inline;} ul#css3menu ul span{ background-image:none;padding-right:16px;} ul#css3menu li.topitem>a{ background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;} ul#css3menu li.topitem:hover>a{ background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)} ul#css3menu li.subfirst>a{ border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} ul#css3menu li.sublast>a{ border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;} And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site I can usually figure out most CSS problems but this one is a mystery. The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0. Why is it doing this? Here is the CSS: Code: <style type="text/css"> .contain { position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top; } .corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;} .corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; } .corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;} .corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; } </style> <div class="contain"> <div class="corner-top"><div class="corner-left"></div></div> <div class="intro" style="position:relative;"><p>Text here...</p> <div class="corner-bottom"><div class="corner-left"></div></div> </div> Hi, I have this content Lunch - Chinese Drinks - Soda Dinner - Italian Breakfast - american i want to align these choices So Lunch and drinks, Dinner, breakfast are one below each other and then the - and the corresponding choices Right now it appears likes this Lunch - Chinese Drinks - Soda Dinner - Italian Breakfast - american I want chinese, soda, italian and american all aligned one below each other So i want all the dashes in center and then the content on side of them can someone tell me how i can use css for it charles I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below. MARKUP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en"> <head> <title>Bluebushel | The bushels are alright</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" /> </head> <body> <div align="center"> <div id="topBar"> <div class="logo"> <img src="images/testimage.jpg" alt="Bluebushel" /> </div> <div class="nav"> View Bushel | Account | Order Status | Shipping & Returns | Help </div> </div> </body> </html> CSS Code: body { background-color: #E9E9DF; margin: 0em; } a.nav:link, a.nav:visited { color: #000000; font-family: Arial, Verdana; font-size: .8em; text-decoration: none; } a.nav:hover { color: #336699; font-family: Arial, Verdana; font-size: .8em; text-decoration: none; } #topBar { background-color: #FFFFFF; border-left: 2px solid #C5C5C5; border-right: 2px solid #C5C5C5; border-bottom: 1px solid #EEEEEE; height: 5.79em; margin: 0em; padding: 0em; width: 50em; } #topBar .logo { float: left; text-align: left; } #topBar .nav { color: #E3E3E3; float: right; font-family: Arial, Verdana; font-size: .73em; height: 100%; text-align: right; vertical-align: middle; Thank you for your time. here is the page... emarketing and design . com /spa/ Its the "sign up for specials and promotions" with sign up box.. how do I get it to flush right? here is my css--it's "newsletter" (this is my first try with css - be nice) p { margin: 0.4em 0.5em; font-size: 0.85em; } a { color: #197EF1; text-decoration: underline; } a:hover { color: #DF3A00; text-decoration: none; } a img { border: none; } ul, ol { margin: 0.5em 2.5em; } h2 { margin: 0.6em 0 0.4em 0.4em; } h3, h4, h5 { margin: 1em 0 0.4em 0.4em; } * { margin: 0; padding: 0; } body { background: #000000 0 0; color: #a9a9c7; font-size: 1em; font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida; } #container { margin: 0 auto; width: 770px; position: relative; } #top { height: 50px; background: url("image/top.jpg") 0 0 no-repeat; } #top p { margin: 0; padding: 0; } #header { height: 150px; margin-top: 0px; background: url("image/header1.jpg") 0 0 no-repeat; } #menu { position: absolute; top: 152px; left: 0px; } #newsletter { position: absolute; top: 0px; } #content { clear: both; margin-top: 23px; width: 770px; background: url("image/content.gif") 0 0 repeat-y; } #text { width: 518px; background: #313040 0 0 no-repeat; color: #9c9cd0; float: left; } #column { float: right; width: 247px; background: #414169 url("image/column.gif") 0 0 no-repeat; } #content-bottom { clear: both; display: block; width: 770px; height: 13px; background: url("image/content-bottom.gif") left bottom no-repeat; font-size: 0; } #footer { margin-top: 5px; padding-top: 2px; height: 33px; background: url("image/footer.png") left bottom no-repeat; } #header h1 { margin: 5px 0 0 50px; padding: 0; font-size: 1.2em; } #header h2 { margin: 10px 0 0 90px; padding: 0; font-size: .3em; color: #9c9cd0; } ul#menu { margin: 0; } #menu li { list-style-type: none; float: left; text-align: center; width: 80px; margin-right: 1px; font-size: 1.05em; } #menu a { display: block; height: 18px; padding-top: 1px; text-decoration: none; background: #414169 no-repeat 0 0; overflow: hidden; width: 100%; font-size: .75em; font-family: Verdana, "Geneva CE", lucida, sans-serif; color: #fff; } ul#newsletter { margin: 0; } #newsletter li { list-style-type: none; float: right; text-align: center; width: 290px; margin-right: 0px; font-size: 1.05em; } #newsletter a { display: inherit; height: 18px; padding-top: 1px; text-decoration: none; background: #414169 no-repeat 0 0; overflow: hidden; width: 100%; font-size: .75em; font-family: Verdana, "Geneva CE", lucida, sans-serif; color: #fff; } #menu li>a, #menu li>strong { width: auto; } #menu a.actual { background: url("image/menu-actual.gif") no-repeat 0 0; color: #952020; } #menu a:hover { color: #ff5900; } #column p { font-size: 0.7em; } #column ul { font-size: 0.8em; } #column h2 { position: relative; height: 26px; width: 215px; margin-top: 40px; padding-top: 6px; padding-left: 6px; font-size: 0.7em; background: url("image/h3-column.gif") 0 0 no-repeat; z-index: 1; font-family: arial, "Geneva CE", lucida, sans-serif; } #column h3 { position: relative; height: 5px; width: 215px; margin-top: 4px; padding-top: 2px; padding-left: 6px; font-size: 0.8em; background: url("image/h3-column.gif") 0 0 no-repeat; z-index: 1; font-family: Arial, "Geneva CE", lucida, sans-serif; } #column h3 span { margin-left: 10px; } #column span.name { text-align: right; color: #9c9cd0; margin-right: 5px; } #column a { color: #9c9cd0; } #column a:hover { color: #9c9cd0; } #text h1,#text h2,#text h3,#text h4 { color: #a9a9c7; } #text h3.headlines a { color: #a9a9c7; } p.comments { text-align: right; font-size: 0.8em; font-weight: bold; padding-right: 10px; } #footer p { text-align: center; } #footer a { color: #9c9cd0; } #footer a:hover { color: #DF3A00; } #your-url { position: absolute; left: 70px; top: 15px; font-size: 1.1em; } #your-url a { color:#9c9cd0; text-decoration:none; } #your-url a:hover { color: #9c9cd0; } ol.comments { font-size: 0.9em; } Hey i'm new to this forum thing so here goes. I'm stuck trying to align an image in the center of an e-mail template. I'm using inline CSS to keep the template as small as possible. The code i have is: <img src="yes_group.jpg" alt="Yes Company Logo" height="100" width="50%" /> I need something i can put into that line of code to center the image. I've searched a few different site for hints (or the actual tag i need) but can't seem to find it anywhere. Any help would be greatly received so if you have any idea's please let me know. Thank You. Hi, I know this must be a real stupid question but I've tried loads of googling around and just cant figure out how to do this. Please could someone tell me what I'm doing wrong. I want the <a> to be aligned to the top right. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> body { font: 12px Verdana, sans-serif; } .assignment { margin: 2px; padding: 4px; border: 1px solid; border-color: gray; background-color: lightyellow; text-align: left; width: 150px; height: 20px; vertical-align: center; } a.removeAssignment { align: top; padding: 1px; margin: 0px; border: 1px solid gray; position: relative; top: 0px; right: 0px; float: right; width: 16px; height: 16px; background-image: url('remove_icon.png'); background-repeat:no-repeat; background-position: center; } </style> </head> <body> <div class="assignment">Hello<a href="#" class="removeAssignment" /></div> </body> </html> Hi, How do I place "progress.gif" so that it is in the vertical middle in relation to <input type="text" Right now it is OK in Interent Explorer 6 but appears too high in FireFox. Code: <div> <label>City:</label> <span><input type="text" name="city" /><span><img src="progress.gif" border="0" /></span></span></div> I tried this to no avail. <span style="padding-top:5px"><img src=... Thank you. Hi guys. I was trying hard to figure out myself before posting this question on this site: (www dot paintersdirectory.ie/listing/location/leinster/county-longford) there is a "float-right" div ".sidebarSearch". It is hitting left bottom corner of the div "map" above it. I would like my sidebarSearch to be underneath map on the very right. Thank you very much Hello everyone. Im back again with yet another problem about css. Site link: Code: http://peaknutritionlabs.com/ My problem is that i had to set the width for #ez-fat-footer-container to 1316px because of the background image but now the problem is that all the widgets in that container got out of place and moved to the left. margin: auto; doesent work. I can move it to the center with position: relative; left: 200px; but when someone has a smaller screen the widgets get pushed to the right by 200px and i would like it to stay in the center. Anyone know a way to pull this off ? EDIT: I have used relative position to move it in place and it seems ok for those with resolutions 1366x768 or higher. But i would still like to know how to center it for lower resolutions if anyone knows.. After five plus hours of work last night on a layout which can be found here ( http://www.politicalanalyst.net/test.php ) I have a layout that works.. but only in Safari. I'm going to grab the stylesheet for connivence sake. I know my way around CSS but I'm self taught and I frequently run into these kinds of problems, I really appreciate any help. Safari Screen ... the way it should look ( http://www.politicalanalyst.net/safari_screen.png ) Firefox ... t3h b0rk3n ( http://www.politicalanalyst.net/firefox_screen.png ) And the CSS stylesheet can be found here ( http://www.politicalanalyst.net/test.css ) Thanks again, Max |