|
CSS - Problem Positioning Images Using Css
I redid a webpage and I am not using table, everything displays properly except the last two images, one has different height... I need to align the last one on top.
Since I'm new to css, I don't know how I could do float:top;.. view what I'm talking about. hopitel.com/temp/test.html Thanks. Similar TutorialsHi, i'm trying to align two images in a box, and can't figure out the best way to do it. Basically i have an id: #leftcol { background:url(images/home_page/banner-bg.gif) top left repeat-x; width:84%; border:1px solid red; } then i have two images on that i want aligned top left and the other that i want aligned top right. i managed to get the top left one in: <div id=leftcol> <img src="images/image.jpg" width=559 height=88 border="1"></div> now where and how do i put the second image in, to get it to align top right? thanks, Heidi I have a table with a width of 100%. At the right end, I want to position an image with its top right corner relative to the top right corner of the table. I cand quite figure out how to do it with CSS. Can someone give me a hint? I have a web page with three images: (http://www.stud.ntnu.no/~rasmusal/). The first one is the background image (backcenter.jpg) which repeats as it is supposed to. Then I have the image on the top (backtop.jpg) which is centered at the top and shows ok in FF but is one or to pixels off in IE. The last image is backbottom.jpg which should be at the bottom of the page, but for some reason is below the top-image. Could someone tell me how to position the images so that they are all vertically centered (in at least FF and IE), and so that top is at the top and bottom is at the bottom? The css is as follows: body { color: #444; background-color: #fbfbfb; background-image: url(backcenter.jpg); background-position: top center; background-repeat: repeat-y; margin: 0px; padding: 0px; } #topImage { background: url(backtop.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 350px; } #bottomImage { background: url(backbottom.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 50px; } And the html: <body> <div id="container"> <div id="topImage"> </div> <div id="bottomImage"> </div> </div> </body> Thanks!!! Ive got three divs all nested in a row. The idea is to have the main div (body tag) contain the background image that composes the color. Then the next div contains the upper left hand image and the next div contains the lower right hand image. The problem is this. When I specify "top-left" for the image the image is positioned to the top left. When I specify "bottom-right" for the image in the next div, instead of going to the bottom right, the image ends up all the way over on the top left. why is that? here are my three divs: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/dtdbg.jpg);
background-repeat: repeat;
/*
*/
}
div#outer {
margin: 0px;
border: 3px solid white;
background-image: url(http://www.doublethinkdesigns.com/pics/upper-left-fan.gif);
background-position: top-left;
background-repeat: no-repeat;
}
div#inner {
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif);
background-position: right;
background-repeat: no-repeat;
}
I have a number of icons. - back button - print button - next button I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear. I did think I would just use tables, but figured someone here maybe able to help me out. I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? I have worked out a section banner. There is one for each section in a column of 4 or 5. The buttons on the left call a JavaScript that move DIVs up and down, reordering the content as the user wishes. Anyway, I'm having trouble figuring out how to make the center section where the Title is, non-fixed (expand to fit the space). I'd like it to spread out to as wide as the container allows, minus the width of the left and right ends, of course. See the actual thingy on a test page he Siliconsatan Here's the styles: Code:
<style type="text/css" media="all">
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
letter-spacing: .05em;
color: #003366;
font-weight: bold;
line-height: 30px
}
.col_block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.col_block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.col_image {
position: relative;
display:block;
left: 6px;
top: 12px;
}
</style>
Here's the html: Code:
<div class="col_tab_left">
<div class="col_block_up">
<img onclick="MoveBlock('ys101','bizJournalCity','Up');" class="col_image" src="images/block_up2.gif" width="11" height="11" border="0" alt="" alt="Move section up" title="Move section up" style="cursor:pointer;" />
</div>
<div class="col_block_down">
<img onclick="MoveBlock('ys101','bizJournalCity','Down');" class="col_image" src="images/block_down2.gif" width="11" height="11" border="0" alt="" alt="Move section down" title="Move section down" style="cursor:pointer;" />
</div>
<div class="col_tab_middle"><span class="col_tab_title">Business Journal News</span></div>
<div class="col_tab_right"></div>
</div>
It looks like this: I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I'm very new to css positioning so this might be an easy question... What I'm trying to do happens to position properly in IE6 and Firefox like so: http://whythrowchip.go.dyndns.org/atx1.jpg But it doesn't come out properly in IE 5.X , it looks like this: http://whythrowchip.go.dyndns.org/atx2.jpg It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it... So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line? Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here): Code:
from main page:
<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>
entire external style sheet:
body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}
#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}
#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}
any help would be greatly appreciated ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict Firefox is not positioning divs ifrVerse and ifrVerse2 side-by-side. I see ifrVerse2 outside the div main_table Code: <div id="main_table" style="border: 1px solid rgb(124, 124, 124); float: left; background-color: rgb(181, 162, 111); width: 645px; height: 770px; text-align: center;"> <div name="ifrVerse" id="ifrVerse" style="border: 1px solid rgb(181, 162, 111); margin: 5px 0px 5px 5px; float: left; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <div style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="selbook" size="5" onchange="fillChapters();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div> </div> </div> <div name="ifrVerse2" id="ifrVerse2" style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: right; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <form name="myForm" id="myForm" action="" method="get"> <div style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="book2" size="5" onchange="fillChapters2();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="text" style="padding: 10px; width: 50px; height: 440px;"></div> </form> </div> I have a page with a number of thumbnails, each displayed individually in a DIV. The thumbnails (DIVs) are grouped in a few sections. Please have a look at this page. Resize the browser width and see what happens to the last row of images in each section. Some do align left as they should, but some do align right. Can anybody explain to me why this is happening. Or better still, what I should do about it? Oh yes, I use this stylesheet: Code:
a : link, a : active, a : visited {
text-decoration : underline;
background : transparent;
}
a : hover {
text-decoration : underline overline;
background : transparent;
}
body {
background: #FFF url(Background.gif);
font: normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
text-align: left;
margin: 0px 0px 0px 0px;
}
div.programmers {
float : left;
width : 150px;
margin: 0px 8px 15px 8px;
text-align : center;
}
div.spacer {
clear : both;
}
h1 {
font: normal 16px/30px Trebuchet MS, Tahoma, Verdana, Arial;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
h1.phw {
background-image : url(xp-phw.png);
}
.plaintekst {
background : transparent;
font : normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : none;
color : #000;
}
.plaintekst p {
margin-bottom: 15px;
}
(SOLVED) I have positioned a navigation line (previous page, next page, etc) at the top of my static html page using the following css <p class>: p.navigationTop { position:relative; float:right; top:-95px; font-size:0.9em; } It sits inside #content { line-height:1.6em; margin:-95px 185px 5px 185px; padding:0; text-align:left; } It works fine in FF, Opera, Chrome and IE8, but then came IE9, and in that version my simple navigation is way out of place, i.e. too high up (probably those 95px). Has anybody any suggestions as to how I can remedy this? I would be grateful for some help. Gloria2 I'm having a problem with the positioning of my navbar in IE, the problem page is http://www.mckr.ie/test.html In Opera the left navbar div and the main content div are positioned fine but in IE they go up on the page for some reason? Its strange because they are absolutely positioned. Please can you help? Here is the HTML code for the page: Code: <div id="bannerdiv"></div>
<div id="contentdiv"><!-- InstanceBeginEditable name="content" -->
<h1>Welcome to the McKeever Rowan Solicitors/Lawyers Website</h1>
<p>McKeever Rowan Solicitors is a long established Irish law firm located in the International Financial Services Centre in Dublin, Ireland. We also have an office in Paris and representation throughout the European Union through our membership of <a href="http://www.cyrus-ross.com/home.htm">Cyrus Ross International</a>.</p>
<p>The law firm has in depth knowledge of specific industry sectors, which it brings to bear in advising in these sectors and which will save clients time and resources in buying legal services. Our focus always is in providing clear legal advice of the highest quality based on a thorough understanding of the industry sector involved. </p>
<p></p>
Our areas of expertise include:
<ul>
<li> Corporate Law</li>
<li>Regulatory and Commercial Law</li>
<li>Communications and Utilities Law</li>
<li>Information Technology Law</li>
<li>Technology and Electronics Law</li>
<li>e-Commerce Law</li>
<li>Financial Services Law</li>
<li>Litigation</li>
<li>Banking Law</li>
<li>Insolvency, Bankruptcy and Corporate Law</li>
<li>Recovery </li>
<li>Commercial Litigation, Arbitration and ADR</li>
<li>General Personal Litigation</li>
<li>Property and Private Client</li>
<li>Residential Property/ Real Estate Law</li>
<li>Commercial Property/ Real Estate Law</li>
<li>Wills Trusts and Administration of Estates</li>
<li>Buying Property in France</li>
<li>Employment Law</li>
<li>Family Law </li>
</ul>
<p>Please click on the links opposite for more details on the specific areas and our link below for details of our disclaimer.</p>
<!-- InstanceEndEditable --></div>
<div id="leftnavdiv">
<div id="leftnavouterdiv">
<div id="leftnavinnerdiv">
<p><b>Practice Areas</b><br />
Corporate/Commercial<br />
<a href="pages/corporate.html">Corporate</a><br />
<a href="pages/regandcom.html">Regulatory and Commercial</a><br />
<a href="pages/communicationsandutilities.html">Communications and Utilities</a><br />
<a href="pages/informationtech.html">Information Technology</a><br />
<a href="pages/technology.html">Technology and Electronics</a><br />
<a href="pages/ecommerce.html">e-Commerce</a><br />
<a href="pages/financialservices.html">Financial Services</a></p>
<p>
<b>Litigation</b><br />
<a href="pages/banking.html">Banking</a><br />
<a href="pages/insolvency.html">Insolvency, Bankruptcy and Corporate<br />
Recovery</a><br />
<a href="pages/commerciallitigation.html">Commercial Litigation, Arbitration<br />
and ADR</a><br />
<a href="pages/personallitigation.html">General Personal Litigation</a></p>
<p><b>Property and Private Client</b><br />
<a href="pages/residentialproperty.html">Residential Property/ Real Estate</a><br />
<a href="pages/commercialproperty.html">Commercial Property/ Real Estate</a><br />
<a href="pages/willsandtrusts.html">Wills Trusts and Administration<br />
of Estates</a><br />
<a href="pages/frenchproperty.html">Buying Property in France</a></p>
<p> <a href="pages/employment.html">Employment Law</a></p>
<p><a href="pages/familylaw.html">Family Law</a> </p>
</div>
</div>
<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>
<form action="http://search.atomz.com/search/" method="get" target="main">
<b>Search the Site<br />
</b>
<input name="sp-q" size="15" />
<input name="submit" type="submit" value="Go" />
<input name="sp-a" type="hidden" value="sp10023119" />
<input name="sp-f" type="hidden" value="ISO-8859-1" />
</form>
</div>
</div>
</div>
<div id="topnavdiv">
<ul>
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>
<li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>
<li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>
<li><a href="news.html" id="buttonnews"><b>News</b></a></li>
<li><a href="people.html" id="buttonpeople"><b>People</b></a></li>
<li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>
</ul>
</div>
Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
Hello, If you go to http://www.tickledpinkcookbook.com/webc.html and view it in Firefox you will see the bottom two images are floating too far to the right. In IE it's fine. Anyone know how to fix this? thanks I've been going through and fixing bugs in IE6, but one in particular is just not cooperating. My header has a horizontal menu and the positioning of it wasn't right in IE6. I changed it to "position:absolute, top:86px". Before, I was using floats. This eliminated white space between two bg images, but caused a new padding problem. Now, IE6 and IE7 both have an issue. In Firefox, "top:86px" lines the menu up perfectly with the baseline of one of the images. In IE6 and IE7, it is 10px short as I have to adjust it to "top:96px" for those browsers to line the menu up. Man, everything was going great until I downloaded and tested IE6 today! Hi, Plz see this page- http://www.quizmetro.com/articles/marriage This page is working well in firefox but in IE, the mid content part gets pushed down by about 700-800 pixels. Also there is a line of 2 pixels on the right side of the header. This problem is only occuring in the category page but the article page is working fine- http://www.quizmetro.com/articles/marriage/valentines-day-and-married-couples.php Can anyone help me with this? Thanks, Nishant What I'm trying to do here is have an image as a background aligned to the very bottom. I have it in it's own div, and I could get the div to align to the bottom, that's no problem. However, my problem occurs on lower resolution, and the div that has the background "overlaps" the rest of the content. Not good. Is there anyway I can align a div to the BOTTOM without overlapping any content? There are no left or right floats, the layout is pretty much centered. Here's my footer code PHP Code: div.footer { margin: 0px auto; width: 100%; height: 400px; overflow: hidden; padding: 0px 0px 0px 0px; background-image: url("../images/golf_bottom.jpg"); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } I seen on other webpages that they applied a background through the body tag and aligned it to the bottom, but I already have a background reserved for that. Hi all, I used CSS to set the elements position properly but I have a weird result... I have a simple textbox and a button, next to each other; I want them be between 2 lines in a specific position. If I dont use position property, the button is wrapped above the textbox and I dont want this happen. So, I decided to use: position:absolute; for the first textbox position:relative; and with left-top I aligned the textbox. This used to work (only for mozilla, with other browsers the position is different ) But some days a problem appears also in Mozilla!!! The first time that the page is loaded, the textbox and the button get slightly up than the position that I have ordered. And once I press the button, both textbox and button goes to the correct position. The problem seems to be minor, but it is irritating that when the page is loaded the elements are not in the correct position. Any ideas? Thank you! |
|||||||