|
CSS - Avoiding Taking Of Default Height In Ie
hi..
i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... Similar TutorialsI had my css working fine and then I decided to change the layout and I almost have the new style sheet finished. However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc. I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em. I specified height and width on all <div>. Some used borders, some did not. An example would be: PHP Code: <div style="height:2px; width:3px; background:green" ></div> Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same. Any help appreciated. NotGoddess Hi to all, & this is my question: say I have a css class such as: .classA1 { color: RED; font-weight: bold; font-size: 11px } Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example: .classA2 = { color: GREEN; rest same as A1 } .classA3 = { color: BLUE; rest same as A1 } .classA4 = { color: YELLOW; rest same as A1 } How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this... Thanks a lot for your help, Luca Hey everyone, I'm working on developing a small CMS, as a project to help push myself into actually completing something and would jsut love some insight into how to clean up some of my CSS. At the moment im not satisfied how im formating the CSS stylesheet. For example Im working with nested divs, in this case for one component of the site, and I find I'm repeating certain perameters that could be avoided, but I'm unsure how to do that. Example Code: PHP Code: echo '<div id="article">'; echo '<div id="article_header">'; echo $row['news_title']; echo '</div>'; echo '<div id="article_content">'; echo $row['news_content']; echo '</div>'; echo '<div id="article_footer">'; echo 'Add Comment'; echo '</div>'; echo '</div>'; CSS: Code:
#article {
margin-bottom: 8px;
border: 1px #1D1D1D solid;
padding: 5px 5px 5px 5px;
background-color: #4C4C4C;
}
#article_header {
padding: 5px 5px 5px 5px;
background-color: #1D1D1D;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_content {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_footer {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
}
To summarize my question, is there a better way of formating my CSS and how would I do so? Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs? Something like so: Code: <div id="one"></div> or <div class="two></div> <p></p> <p class ="three"></p> etc... In other words, would there be a obvious space where one of these styling markers was placed on the page? Hi, This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code: Code:
td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}
Any ideas? thanks in advance. I have read the other topics on the height and I have worked out a compromise in IE where I can set the height of my Divs in pixels, as I want the columns to align up at the bottom. However I would prefer it if the height was relative to the browser resolution which is what I have in Firefox by using % instead of pixels. Is there a way I could make IE use % at all? Here's the CSS concerned. Code:
#centercontent {
position: absolute;
background:#fff;
width: 78.3%;
height:auto;
min-height: 80%; /* works in FF, not IE */
margin-left: 19%;
font-family: Verdana, helvetica, Arial, Tahoma, sans-serif;
padding: 6px;
}
/* for Internet Explorer */
* html, #centercontent {
height: 600px;
}
The third row as it is behaves as it should, spanning 3 columns. When I change the display style to none, the final row dissapears, which again is fine. However, when I click on the Show Description button, the textarea appears, but the first cell in the first row expands to the same width as the textarea two rows below, overwriting the colspan of the bottom row. Can anyone explain why its behaving this way? How can I fix this? Code: <table border="1" style="width:100%;"> <tr> <td width="400" align="left"></td> <td width="200" align="left"><span class="red"></span></td> <td width="312" align="left"><span class="red"></span> </td> </tr> <tr> <td align="center" valign="middle" colspan="3"> <input type="button" id="ShowDescription" value="Show Description" onclick="Desc(this);"> </td> </tr> <tr> <td id="desc1" align="center" colspan="3" style="display: block;"> <textarea cols="100" rows="15"></textarea> </td> </tr> </table> Code: <script type="text/javascript">
var state = true;
function Desc(obj)
{
if(state)
{
obj.value = 'Close Description'; document.getElementById("desc1").style.display = "block"; } else{ obj.value = 'Open Description'; document.getElementById("desc1").style.display = "none"; } state = !state; } </script>
Hi please visit this page As you can see the sample text is pushed towards the bottom of the page despite there is a lot of space available on the right side of the page. here is the css I am using for the div Code: .right_sidez { float: right; width: 430px; margin: 0 5px 0 0; text-align: justify; }
according to the page dimensions it should go up to 550 px width but it works fine till 420px and after that the text is pushed towards the bottom of the page. what can I do to push the text to use all the space available on the right side ? thanks Hi, I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML. Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites. However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself). The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC. Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did. I am giving some extra detail of what I mean by copy the colour scheme and recreating images. Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from). Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it). Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme. Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence. Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images. dd I have a style sheet, now I am modifying some buttons on some of my pages. So I added the following to my style sheet: INPUT.NEW { background-color: EDEDED; border-color: EDEDED; color: 024467; font-family: arial, verdana, ms sans serif; font-size: 7pt; } And used the following line to call it in the button: <input class="INPUT.NEW" type="button" value="Back" onclick="document.location.href='whatever.jsp?theFlag=1'"> Which doesn't work, but if I rename "INPUT.NEW" to just "INPUT" on both pages it works. But I can't have it called INPUT because one already exists on the page. This is a style sheet that I did not write, someone else did, so I'm trying to make this change. Any help would be appreciated. Hello. I'm trying to avoid using the <div style="clear:both"> fix for keeping elements from floating outside of their containers in IE7. Here's the code that's working with that fix. I'd like to have a way to adjust the CSS so I can take that out. 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" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/.css" rel="stylesheet" type="text/css" /> <title>A Beautiful Smile</title> </head> <body> <div id="wrapper"> <div id="banner"> <ul id="navigation"> <li><a href="">Home</a></li> <li><a href="">Help</a></li> <li><a href="">Contacts</a></li> </ul> <img id="logo" src="images/global/logo.jpg" alt="Company Logo" /> <div style="clear:both"></div><!--Prevents img changesmile.jpg from going outside banner in IE7 --> <img id="changesmile" src="images/global/changesmile.jpg" alt="Learn how we can change your smile." /> </div> <div id="footer"> </div> </div> </body> </html> CSS Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* End CSS Reset, Begin Styling */
#wrapper{
margin: 10px auto;
width: 735px;}
#banner{
width: 100%;
height: 279px;
margin: 0px auto;
background: URL('../images/global/banner.jpg') no-repeat;}
#navigation{
width: 200px;
margin: 50px 0px 0px 330px;
float: left;
}
#navigation li{
display: inline;
list-style-type: none;
float: left;
margin-left: 20px;}
#navigation li a{
color: #CCCCCC;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: .70em;
text-decoration: none;}
#navigation li a:hover{text-decoration: underline;}
#logo{
display: block;
width: 180px;
height: 82px;
float: right;
margin: 0px;
}
#changesmile{
display: block;
width: 228px;
height: 75px;
float: right;
clear: both;
margin: 100px 60px 0px 0px;
}
I appreciate your help! the design for a web page i am coding calls for a floater with rounded corners and drop shadows. this is easily done by making the entire background a PNG with the corners, borders, and shadow applied (thankfully the window is a fixed size) now, ive been having no problems in the past using the following code in my javascript pop ups. however, this time i'm replacing the entire background with this and it's making everything inside of the container that has this unclickable. i realize there are workarounds to this including making everything 'inside' this window absolute above it, to only making the drop shadows transparent PNGs, but i'm hoping for a much simpler answer. does anyone know about this issue? Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blah.png', sizingMethod='crop'); This is basically what my html looks like: Code: <tr class=bullish><td>BLAH</td><td>blah</td><td>Blah</td></tr> Here's the relevant section of my external style sheet: Code:
tr.bullish { background-color: #CCFFCC; font-weight: bold;}
tr.bearish { background-color: #FFCCCC; }
tr.neutral { background-color: #FFFFFF; }
here is a screenshot showing the rendered webpage plus the source plus the CSS source. The background colors are for the table rows with up to 5 checkboxes. The screenshot shows them to be white, rather than the light red / light green that I'm going for. Screenshot Please refer to the following web site: h*t*t*p://alturl.com/iio4 As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop). I don't want it to however appear at the end of the last link (shop). I have tried several things but can't seem to get the CSS to remove it just after the last link. Any help with this would be greatly appreciated. Following is both HTML and CSS code: Code: <div id="navigation"> <a href="/about" class="navigation-about">About</a> <a href="/events" class="navigation-events">Events</a> <a href="/teams" class="navigation-teams">Dance Teams</a> <a href="/shop" class="navigation-shop">Shop</a> </div> Code:
/***** Navigation *****/
#navigation {
background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/
.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
float: left;
display: block;
padding: 0 0 0 12px;
font-size: 105%;
}
#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px;
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}
Thank you once again! If possible.. pleaseeeee provide a working CSS so I do not misunderstand you. Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this). My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems. I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space. To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am! Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing. Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb. Here is my CSS... http://www.kettlebell.com/css.css (by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.) Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance |
|||||||