|
CSS - <b> Block Problems In Ie6
Hi guys
I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can? Screenshot of situation: here is my code for the <b> blocks: PHP Code: .navbar b.lefty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:-20px; padding:0; margin:0; background-color:#ffffff; } .navbar b.righty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:136px; padding:0; margin:0; background-color:#ffffff; } Here is my code for the <UL> block: PHP Code: .navbar :hover ul { z-index:604; width:136px; top:40px; left:0px; padding:0; margin:0; background-color:#333333; text-align:left;} Now here is my HTML: PHP Code: <ul> <b class="lefty">d</b> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <b class="righty">d</b> </ul> Similar TutorialsI have a simple list rollover menu, and works fine in all browsers, but in ie the block element is not working as it should. When you rollover the links you have to have the mouse positioned over the text in the block to get it to show as a rollover, if you move to the right of the text (where in other browsers it still shows as a rollover) you lose the rollover effect. I have checked and checked and cannot see why this is happening in ie. Here is my code for the navigation layer. Code: <div id="navigation" style="position:absolute; left:89px; top:303px; width:193px; height:307px; z-index:3; overflow:visible"> <p class="f-lp"><ul> <li><a href="index.html">HOME</a></li> <li><a href="events.html">EVENTS</a></li> <li><a href="news.html">NEWS</a></li> <li><a href="galleries.html">GALLERIES</a></li> <li><a href="timeline.html">TIMELINE</a></li> <li><a href="contact.html">CONTACT INFO</a></li> </ul> <p class="address f-lp">To234JA</p></p> </div> And here is my css code Code:
/* navigation */
#navigation {
font-family: Tahoma;
font-size: 14px;
color : #ffffff;
border: 1px solid #fff;
border-width:0px 0px 1px 1px;
}
#navigation ul {
list-style: none;
margin: 0px;
padding: 0;
}
#navigation a {
display: block;
color: #FFFFFF;
width: 178px;
padding: 5px 5px 5px 10px;
border: 1px solid #fff;
border-width:0px 0px 1px 0px;
text-decoration: none;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #000000;
padding: 5px 5px 5px 10px;
}
/* END OF Navigation */
Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code:
#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}
#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
list-style-type: square;
}
#main_content li {
line-height: 15px;
}
In Firefox the line heights are consistant, am I missing something? Thanks I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> http://warcraftpress.com/theme/theme.html I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it. Thanks I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough. I have a containing block, #content_main, defined as such: Code: #content_main
{
margin-left: 170px;
padding: .5cm .25cm 50px;
}
Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this: Code: h1, h2, h3, h4, h5, h6
{
font-family: georgia, serif;
border-bottom: 1px solid #009;
}
If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks. Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts? MPEDrummer Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh i know this probably aint the first time this has been brought up... but i dont even know what to call it.. so i can search for it.... here is my issue, i have two divs... and naturally with block elements there is a auto <br> or what ever that is put on it... how do i eliminate this.. without making it an inline element?? anyhelp would be GREAT it has been bugging me to death. I'm reading the "containing blocks" section of http://www.brainjar.com/css/positioning/: "Block boxes are generated by elements such as P, DIV or TABLE." <div> This is the first sentence. <p>This is the second sentence.</p> </div> "It's interesting to note that while the text of the first sentence in the above example generates an inline box" -Didn't they say that block boxes are generated by div? So why isn't the text of the first sentence in a block box? I have a caption text in a span tag appear on an image rollover. I'm trying to make the caption text selectable and having a terrible time. Can anyone point me in the right direction? Thanks! Here is my code: 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>testing</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
div#img a span {display: none;}
div#img a:hover span{display: block;
position:fixed; top: 300px; left: 350px; width: 125px;
padding: 5px; margin: 10px;
color: #AAA; background: black;
opacity: .5;
font: 10px Verdana, sans-serif; text-align: left;
}
-->
</style></head>
<body>
<div id="img"><a href="#"><img src="http://i43.tinypic.com/2irct0.jpg" width="500" height="392" border="0"/><span>here is the caption text!</span></a></div>
</body>
</html>
I'm trying to put an icon next to a block of text, but I have a bunch of strange width problems. I'd like it to be directly next to the news story, but without the text wrapping. So far, my solution causes the gap between the icon and the text to get really huge as resolution increases. What I want is for the icon to be about 20 or 30 pixels away regardless of the resolution. Any simple way for me to do this? I'm still trying to get the hang of all this CSS stuff. News page: http://www.brickfilms.com/ Story code: Code: <div id='newsItem'><img src="<?echo $icon;?>" width="64" height="64" class="newsIcon"> <div id='newsText'> <h3 class='newsTitle'><?echo $title;?></h3> <p class='newsStory'><i>by <?echo $author;?>, <?echo $date;?></i><br> <?echo $story;?> </p> <br></div> </div> The CSS is at http://www.brickfilms.com/brickfilms.css Thanks in advance. I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! I'm trying to redesign a site that uses old html. I'm just know learning CSS and I was curious if someone could help me rewrite one small part so that I could compare the new and old code. its just a header, with a logo and a banner. The white space is where I would put a logo (its just a white space gif file now).. and the banner is where I'd want the banner. Here is the current code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"> <img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <!-- Begin Free-Banners v2.1 HTML Tag. All Rights Reserved. Patent Pending. --> <iframe src="http://ads.free-banners.com/cgi-bin/adserver/banner?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2&type=2&page=1" hspace=0 vspace=0 width=468 height=60 marginwidth=0 marginheight=0 frameborder=0 scrolling=no> <a href="http://ads.free-banners.com/cgi-bin/adserver/click?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2" target="_top"> <img src="http://ads.free-banners.com/cgi-bin/adserver/banner?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2&type=1&page=1" width=468 height=60 border=0 alt="Free-Banners"></a> </iframe> </td> </tr> </table> I have been reading about the problems regarding visibility with IE/FireFox/Safari. I have: Code:
<input type="button" onClick="toggleSurveyView('block')">
<input type="button" onClick="toggleSurveyView('table-row')">
<tr id="surveyDetails">
<td>HI</td>
</tr>
function toggleSurveyView(visible) {
document.getElementById('surveyDetails').style.display = visible;
}
In IE visible: block works great in FireFox/Safari visible: table-row works great. Is there a work around to get this visibility issue resolved for all browsers? Or am I going to have to perfrom some sort of browser type check? I just want to be able to toggle showing this table row on and off I really, really want to figure out how to duplicate the way Newegg.Com's product cells on their front page dynamically change width depending on the width of your browser window. I see they use some extremely fancy javascript that frightens me greatly. What do you guys think about their technique? I'm using the same CSS cell idea on my site so that the product tables display varying numbers of columns depending on the user's browser width. But man, this final step of autowidth is totally out of my league. hey, I have 4 block elements like this: Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="banner"> </div> <div id="logo"> <img src="images/logosmall.png"> </div> <div id="registercontent"> </div> <div id="footer"> </div> </body> </html> and the following CSS: #banner { height: 75px; width: 100%; background-image: url(images/bg1.gif); } #logo { position: absolute; top: 30px; left: 34px; z-index: 10; } #registercontent { position: static; width: 600px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-left: 25px; font-family: verdana; font-size: 12px; border: 1px solid #39ce96; color: #39ce96; background-color: #efefef; } #footer { height: 75px; width: 100%; background-image: url(images/bg1.gif); } now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated. Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks |
|||||||