CSS - Link Over Styling - Half Way :s

I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content,

z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container?

I have attached a doc with screen shots

layer definitions:
Code:

#projects{
    position:absolute;
    top: 400;
    left: 600;
    margin-left:400px;
    margin-top:30px;
    padding-top:30px;
    padding: 10px;
    height: auto;
    width: 300px;
    z-index: 1;
    visibility: visible;
}
#DBApps{
     position:absoute;
     top: 400;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 400px;
     z-index: 2;
     visibility: hidden;

}
#resources{
     position: absolute;
     top: -200;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 300px;
     z-index:3;
     visibility: hidden;

}

Any and all suggestions would be greatly appreciated.

I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC.

Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up.

If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did.

Here's the HTML that handles this part of the page:

Code:

<div id="nav2">
  	<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
  	<div id="nav-secondary">
     		<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
	  </div>
</div>

And here's the relevant CSS:

Code:

	#nav2 {							/* nav bar for secondary pages */
		border-top: 1px solid #BD7445;
		border-left: 1px solid #BD7445;
		border-bottom: 1px solid #2D2A28;
		border-right: 1px solid #2D2A28;
		height: 27px;
		margin:0px; padding:0px;
		z-index: 0;
		background: #A73600;
		}

	#nav-secondary-title {  /*placement of title on secondary pages */
		display: inline;
		float: left;
		height: 20px;
		margin: 0px;
		z-index: 1;
		padding:2px 10px 0px 10px;
	}

	#nav-secondary {  /* placement of main nav on secondary pages */
		float: right;
		margin: 0px 10px 0px 10px;
		height: 27px;
		padding: 0px;
		z-index: 1;
	}

	.tab {
		position: relative;
		top: 2px;
		display: inline;
		padding: 0px;
		margin: 0px;
	}
	img.navimage {
		border: 0px; margin: 0px; padding:0px 6px 0px 6px;
	}

Thanks - any help would be much appreciated!

Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>

  

  


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html> 

Hi All

I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox.

Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template.

Code:

h2, .contentheading { 	
padding: 0; 	
font-family: Verdana, Geneva; 	
font-size: 1.3em; 		
font-weight: bold; 	
vertical-align: text-top; 	
color: #333; 	
text-align: left; 	
width: 100%; } 

Any idea how to fix such a problem?

Looks fine in all other browsers (of course).

http://sports.theedgenews.com

For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up.

Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered.
A copy of the css is here.
http://sports.theedgenews.com/css.css

If anyone has any ideas at all on what to do, it would be greatly appreciated.

Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it.

Thanks for any help.

I am not sure the best way to colour half a table cell?

Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each?

This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued


http://66.195.240.220/~majdkgf/cip/

it works PERFECT in Firefox...not in Internet Explorer

I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics.

At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature")

When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off.

I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site.

www . deepwaterchurch . com


Thanks so much.

Hi, my xml code is:

<room>
<features>
<pool/>
<Aircon/>
<Radio/>
<DVD/>
<beds double="2"/>
</features>
</room>

<room>
<features>
<pool/>
<TV/>
<VCR/>
<beds twin="1" double="2"/>
</features>
</room>

i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list.

This is the code i have so far:

features{
}

features:before {
content:"Features";
font-weight:bold;
}

beds:before{
content:"Beds: ";
}

beds[sofa-bed]:after{
content:attr(sofa-bed)" x Sofa-bed ";
}

beds[double]:after{
content:attr(double)" x Double ";
}

beds[twin]:after{
content:attr(twin)" x Twin ";
}


The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed.

Any idea's?

I have a menu constructed <div><ul><li><a><img><p>.

The li is margined as 16% to space a given number of links across the page in the 100% div.

I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work.

Any ideas how I can get the <a> border to surround the <img><p> tags?

I see that layout on my site is completely broken in IE7...
funnyfurniture.net

Could anybody help me to fix my css...

Hi Guys,

Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table.

All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad.

I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this?

Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table?

Charlie

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

Code:

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

Hi is there anyway of making the height of the textbox smaller. I know you an change the width of it

Thanks