Jump to content

josephbastin

Members
  • Posts

    7
  • Joined

  • Last visited

Everything posted by josephbastin

  1. Hi,I tried creating a vertical rollover list using CSS. The concept is taken from another source on net. The rollover effects are working perfect. But there is one problem.--> In IE, there is unwanted left and bottom padding for the div that holds the list.--> In FireFox and Netscape, there is unwanted left and top padding for the div that holds the list. Also, if the text in the menu is long and if it wraps to the next line, the first line and the second line are colliding.According to me, the padding and margin are set to zero wherever necessary. Still this unwanted padding is happening.Given below is the CSS and HTML code. Could you please clean up the CSS and make it working proper for me without the padding?CSSbody { background-color: #000000; font-family: Tahoma, Arial, sans-serif; font-size: 0.8em; padding: 0px; margin: 0px;}div#mainNav { background-color: #CCCCFF/*url('images/mainNav_holder_primary_bg.gif') repeat-y right top*/; vertical-align: top; padding: 0px; margin: 0px; width: 150px; height: 177px; float: left;}#navList { color: #FFFFFF; vertical-align: top; padding: 0px; margin: 0px; width: auto;}#navlist li { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px;}#navlist a { color: #FFFFFF; text-decoration: none; background-color: #8E3A14; border-top: 1px solid #B24D23; border-right: 1px solid #5C2208; border-bottom: 1px solid #5C2208; border-left: 10px solid #5C5C5C; padding: 0px 5px 1px 8px; margin: 0px; height: 34px; line-height: 34px; display: block;}#navlist a#current { background-color: #5C5C5C; border-color: #B24D23 #5C2208 #5C2208 #444444;}#navlist a { width: 100%; /* only necessary for Internet Explorer */}#navlist a { voice-family: "\"}\""; voice-family: inherit; width: 100%; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */}#mainNav>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */}#navlist a:hover, #navlist a#current:hover { background-color: #5C5C5C; border-color: #444444 #777777 #777777 #444444; padding: 1px 4px 0px 9px; margin: 0px; height: 34px; line-height: 34px;}#navlist a:active, #navlist a#current:active { border-color: #B24D23 #5C2208 #5C2208 #444444; padding: 0px 5px 1px 8px; margin: 0px; height: 34px; line-height: 34px;}HTML<!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><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="list.css" rel="stylesheet" type="text/css" /></head><body><div id="mainNav"> <ul id="navlist"> <li id="active"><a href="#" id="current">Link 1 Active</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul></div></body></html>
  2. Hi,I tried putting border for my thumbnail images using css, calling a class. But the effect is properly coming in FireFox and Netscape 8, but not working in IE. Could you please help me out. I've pasted the code below.CSSdiv#woodpecker_content { padding: 5px; width: auto; display: block;}img.thumbnail { border: 1px solid #DC7B48;}img.thumbnail:link, img.thumbnail:visited { border: 1px solid #DC7B48;}img.thumbnail:hover { border: 1px solid #000000;}div.float_left { float: left; padding-right: 5px;}HTML CODE<div id="woodpecker_content"><div class="float_left"><a href="#"><img src="assets/images/common/tn_camera.gif" alt="" title="No Thumbnail" class="thumbnail" /></a></div>Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here. Information about woodpecker should come here.</div>
  3. Thanks a lot guys for the support
  4. Hi,My requirement is1) Need 100% height for both the divs2) The height of both divs should increase equally if any one or both of the div has more content3) The right div should be aligned adjacent to the left div (Now the right div is displaying below the left div)Given below is the current code. Please reply with the full code. Also, please see that the code works well for both IE and Firefox.<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--#left { width: 200px; background-color: #CCCCCC; text-align: left; height: 100%;}#right { width: 100%; background-color: #FFFF55; text-align: left; height: 100%; float: left;}--></style></head><body><div id="left">Left Pane</div><div id="right">Right Pane</div></body></html>
  5. <html><body> <div id="wrapperDiv" style="width: 500px; border: 1px solid #000000;"> <div id="leftDiv" style="width: 50%; background-color: #FF0000;"> </div> <div id="rightDiv" style="width: 50%; background-color: #CCCCCC;"> Maintain same height for both 'leftDiv' and 'rightDiv' </div> </div></body></html> Hope you have noticed in the code that the "Wrapper DIV" has two DIVs inside. The "Left DIV" and the "Right DIV".The Left DIV is empty whereas the Right DIV has some text in it. If this piece of code is browsed in IE, the Right DIV is below the Left Div and both the Left and Right DIV only occupy the first half of the Wrapper DIV.Now The Question is Q1. What style must be specified to the 'leftDiv' and/or 'rightDiv' to bring the 'rightDiv' to the right of 'leftDiv'?In the sense, both DIVs should be adjacent to each other (similar to 2 TDs of a table).Q2. What style must be specified to the 'wrapperDiv' and/or 'leftDiv' and/or 'rightDiv' so that the 'leftDiv' adjusts its height automatically to have the same height as of the 'rightDiv'?In other words, whatever the length of the content in the 'rightDiv' be, the 'leftDiv' should automatically adjust its height to make its height same as of the height of 'rightDiv'.Please provide the right code for this.
  6. <div style="width: 200px; height: 200px; padding: 15px; margin: 10px;">Q. What will be the total width of this DIV?</div> The above code explains1. DIV Width = 200 pixels2. DIV Height = 200 pixels3. DIV Padding = 15 pixels4. DIV Margin = 10 pixelsThe question isWhat will be the total width of the DIV?
×
×
  • Create New...