|
CSS - Form Inside A Div Not Aligning Correctly In Ie
I am new to CSS and just experimenting with a site. I have however hit a but of a brick wall. Now the following div tags work fine in Firefox but in IE they don't align right.
This is the syle info Code: div#info {
float: left;
width: 210px;
margin-top: 0px;
border-right: 1px dashed blue;
font-family: Arial;
min-height: 350px;
}
.infobox {
width: 220px;
height: 280px;
background: transparent url(images/userinfo.jpg) no-repeat top left;
text-align: left;
padding-left: 10px;
}
.userbox {
padding-top: 40px;
padding-left: 55px;
font-size: 20px;
}
.questionbox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
.scorebox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
Now the following code works fine in both firefox and ie. It aligns everything up. Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> Question 1 <div class="scorebox"> 3 out of 5 </div> </div> </div> However i am trying to insert some javascript into the "questionbox" tag like this Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> <form name="questionnumber"> <input type="text" name="question" size="5" readonly="true" value=""></input> <script language="JavaScript" type="text/javascript">test()</script> </form> </div> <div class="scorebox"> 3 out of 5 </div> </div> </div> Then all the alignment stays the same in firefox. However in IE the text box is moved down slightly and therefore doesn't align. Any ideas Similar TutorialsCan anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks Hi guys, I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S any ideas on what i've done here? the page in question is: http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp Thanks Hi all, I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area. The first is this one . Everywhere that WAS white, I want to be this. Then, on TOP of that, and encapsulating the text itself, I want this one . Now, I thought I had this right, but it all isn't working. In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two. In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone. Any help would, as always be greatly appreciated! Chris PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none... If everything is square in the top-left corner there is _NO_ problem, everything looks fine. However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place? Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer? I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. im having problem with checkboxes, they line up correctly, how to fix this Code:
CSS CODE
label
{
width: 250px;
float: left;
}
input
{
float: left;
width:200px;
}
HTML CODE
<label>text1</label> <input type="text"><br>
<label>text2</label> <input type="text"><br>
<label>checkboxes here</label> box1 <input type="checkbox"><br>
box2 <input type="checkbox"><br>
box3 <input type="checkbox"><br>
For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take. I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway. this is a page with the menu as it shows right now.... http://www.seesawusa.com/products/ this is the page with the basic idea of what im trying to do http://www.seesawusa.com/pages/74/ Things i'v tried 1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers. 2. put the UL and the FORM inside a table with 2 cells... in FF, i get the result i want... except the LI and INPUT field are not aligned to the right in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one? Thanks for the glance. P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented. hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d hello all, my site is at waxmuseumplus dot ie css file is on the top level called layout.css I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again. there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page. I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though? The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors. Please help I'm tearing my hair out and the site is already live! I can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css |
|||||||