|
CSS - My Element Is Not Taking Width And Height Instructions
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>
Similar TutorialsHi 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 Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie 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... I 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. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Styling HTML select elements</title>
<style type="text/css">
select {
width: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off. Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS? right now i have a div that is floated left. in Firefox, the width of the box depends on the contents. however, in IE, the width is 100% of the parent element. how can i make IE act like firefox in this situation? Hello all I need to display the Login info inside a DIV 'WELCOME <USER FIRST NAME AND LAST NAME>' i have set the width of the DIV and a font size - 16px but when the name length increases the design brakes One way of solving the issue is by applying some logic using scripts but i want to know that whether we can do anything using the same with CSS only Regards Anees the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored? Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Groups</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navbar {
position: relative;
z-index: 10000;
}
#globalNavWrapper {
position: relative;
width: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
z-index: 10;
}
#globalNavWrapper #nav ul {
list-style: none;
z-index: 20;
}
#globalNavWrapper #nav li {
float: left;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
display: inline;
height: 24px;
}
#globalNavWrapper #nav li.navpadleft {
border-left: 1px solid #999;
}
#globalNavWrapper #nav li a {
display: block;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
height: 0;
width: 100%;
padding-top: 24px;
overflow: hidden;
}
#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
#globalNavWrapper #nav .subnav {
position: absolute;
margin: -1px;
border: 1px solid #999;
background: #fff;
width: 150px;
z-index: -10;
display: none;
overflow: hidden;
}
#globalNavWrapper #nav .subnav li {
clear: both;
float: none;
display: block;
background: none;
line-height: 18px;
height: 18px;
width: 150px;
list-style: none;
border: 0;
}
#globalNavWrapper #nav .subnav li.hr {
border-bottom: 1px solid #999;
}
#globalNavWrapper #nav .subnav li a {
background: #fff;
padding: 0 0 0 5px;
width: 1000px;
height: 18px;
color: #000;
text-decoration: none;
}
#globalNavWrapper #nav .subnav li a:hover {
background: #e4f5e5;
color: #009f00;
}
#globalNavWrapper #nav li iframe {
display: none;
z-index: -1000;
height: 220px;
width: 151px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="globalNavWrapper">
<ul id="nav">
<li id="nav_home" class="navpadleft">
<a href="#">Home</a>
</li>
<li id="nav_myXXXX">
<a href="#">My XXXX</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_people">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
<li id="nav_groups" class="active">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_tnn">
<a href="#">News Network</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_green">
<a href="#">Green Living</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_ecards">
<a href="#">E-Cards</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_shopping">
<a href="#">Shopping</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_petit">
<a href="#">Petite</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_don">
<a href="#">Don</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
startList = function() {
var navRoot = document.getElementById("nav");
var is_MSIE = false;
if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
this.className = this.className.replace("over", "");
}
for(j=0; j<node.childNodes.length; j++) {
if(node.childNodes[j].nodeName=="UL"){
if(is_MSIE) {
var iframe = document.createElement('<iframe frameborder="0">');
iframe.style.position = 'absolute';
iframe.border = '0';
iframe.frameborder = 0;
iframe.style.backgroundColor = '#f00';
iframe.src = 'about:blank';
node.appendChild(iframe);
}
}
}
}
}
}
startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
document.getElementById('nav').style.zIndex = 2000;
</script>
</body>
</html>
I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? I seem to recall that CSS1 or 2 had a property that could be set to specify the height of a text input box or check box or radio button, but it's been a while since I've done it and I can't find it in my notes or find the search terms that will turn up what I'm looking for, or even the page that I did it on. I thought
Code: <input type="text" style="{ height: Xpx; }">
would do it, but it doesn't. Here's some of my code ... xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://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"></meta> <meta http-equiv="Content-Language" content="en-US"></meta> <style type="text/css"> body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif } div { } table { width: 100%; border: none } tr { } td { } .right { text-align: right } ul { margin: 0px; padding: 0px; list-style: none } li { padding-left: 25px } label { } input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; } .textrightinput { text-align: right; height: 18px } .textleftinput { text-align: left; height: 18px } .buttoninput { height: 18px } </style> <title>Donations</title> </head> <body> <!-- Begin Body Table --> <div> <form id="form" action="https://my.domain.com/donate/" method="post"> <fieldset> <legend>Select the project(s) you wish to support.</legend> <input type="hidden" name="cc" value="checkEntries" /> <table> <tr> <td> <ul> <li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li> <li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" /> Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li> <li class="center"><label> Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li> </ul> </td> </tr> <tr> <td class="right" colspan="2"> <input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." /> </td> </tr> </table> </fieldset> </form> </div> <!-- End Body Table --> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://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"></meta>
<meta http-equiv="Content-Language" content="en-US"></meta>
<style type="text/css">
body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif }
div { }
table { width: 100%; border: none }
tr { }
td { }
.right { text-align: right }
ul { margin: 0px; padding: 0px; list-style: none }
li { padding-left: 25px }
label { }
input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; }
.textrightinput { text-align: right; height: 18px }
.textleftinput { text-align: left; height: 18px }
.buttoninput { height: 18px }
</style>
<title>Donations</title>
</head>
<body>
<!-- Begin Body Table -->
<div>
<form id="form" action="https://my.domain.com/donate/" method="post">
<fieldset>
<legend>Select the project(s) you wish to support.</legend>
<input type="hidden" name="cc" value="checkEntries" />
<table>
<tr>
<td>
<ul>
<li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li>
<li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" />
Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li>
<li class="center"><label>
Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li>
</ul>
</td>
</tr>
<tr>
<td class="right" colspan="2">
<input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- End Body Table -->
</body>
</html>
Can you see what I'm doing wrong? screenshot.bmp I'm trying to create an image-navigation system using the popular css sprites technique. However, on the very first image (doesn't occur with any images following), IE6 (and below) increases the height of that image. Here's a very simple code. There are no other codes or elements to interfere with this issue, and yet, it is still present. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style type="text/css">
.nav_top{background:url('http://i185.photobucket.com/albums/x14/mMaNgOeZz/nav-1.gif'); float:left; }
#img1{background-position: 0px 0px; width: 1200px; height: 14px; }
#img2{background-position: 0 -14px; width: 101px; height: 34px;}
</style>
</head>
<body>
<a class="nav_top" id="img1"></a>
<a class="nav_top" id="img2"></a>
</body>
</html>
Any help would be appreciated to no end. Thanks in advance. I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. basically i want to span an absolute div 100% height and width to cover the whole browser window.. IE fails at this.. what are some methods used to get around this? Hi, I have a layout to build and I want to make it as accessibile as possible to the user. I therefore want to allow the user to be able to determine the site font sizes while also keeping the layout look as good as possible. The only way I have done this so far is by setting the width and height of other elements (div's mostly) using the em type. Is this ok? Or I am doing this totally wrong? Regards, Sim085 Hey all, I need an area of content, defined by a div element. I would like it to have a minimum width of 550px, and a minimum height of 500px. However occasionally not everything will fit inside the box. Occasionally the box will contain a picture or word or flash file that exceeds 550px wide. When this happens, I'd like the box to be able to stretch to become wide enough to fit the big word/picture. Likewise when there is too much text, or a picture that is too long, I'd like the box to become tall enough to contain everything. My first attempt was using min-width and min-height. The height worked great, but since divs are block elements, the width would always be 100% instead of 550px. So I then tried adding "display: inline-block;". This made the width work, but now the text didn't automatically go to the next line when it reached the right of the box; instead, the box just increased in width. So to sum it up, I need something like this to have a width and height of 550/500: <div id="test">This sentence is small</div> But this one to stretch to the size required to contain the long word: <div id="test">adsfasdfasdfadfadfasdfasdfasdfasdfadsfasdfasdfadsfasdfasdfasdfasdfad sfasdfasdfadsfasdfasdfadsfasdfasdfadsfasdfasdfasdf</div> Hi there Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div? I set the width of div, via margin Code:
div#footer {
margin: 0px 9%;
height: 40px;
}
When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height. This does not happen in other (gecko) browsers! Anyone know a solution, (tantek won't be precise enough with %) ?? Hi, I have a page where I want to display some preformatted code inside a bordered box that has a fixed width/height with automatic scrolling. I can do this with a DIV + several css styles. However, when I generate the same file with Perl/CGI, The width/height stops working (at least not on my browser, Mozilla 1.1). Here is the file that works: Code: <html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
and here is code that doesn't: Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
The only difference is the DOCTYPE header generated by the CGI script..... and I have no idea why this is: Can anyone help me out? Thanks, Frank Hey all, I'm playing with an idea to include a 100% width/height log_in iframe to be displayed only if $_SESSION[uid]==''; (user not logged in) utilizing the following in a remote style.css to "show" the home page behind the iframe via opacity of 10%, while the iframe blocks access to it untill user logs in. My problem is that width:100%; height:100%; doesn't work, while pixel width & height does in the following: Code: iframe {
position:absolute;
top: 0px;
left: 0px;
width:800px;/*works*/
height:800px;/*works*/
/*width:100%; doesn't work*/
/*height:100%; doesn't work*/
z-index: 100;
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}
|
|||||||