|
CSS - Paragraphs Clipping On A Div. Want It Overflow:visible..
i have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas?
containing div: Code: #content .col {
width: 303px;
height: 277px;
background: url(../images/one_third_box_top.png) no-repeat;
float: left;
}
p: Code: #content p, ul {
padding: 0 25px 0 30px;
line-height: 1.5em;
overflow: visible;
}
edit: this problem is in mozilla, but not in IE... weird. theres also one minor thing on a totally different subject. paths.. my paths a Code: /pub /css main.css /images foo.jpg foo2.jpg index.html obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right? thanks in advance. Similar TutorialsHey guys, I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu. The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE. Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file. You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden. Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position. I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE? I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx. I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Hi all, I have created a widget that has some resize handles positioned to overlap the bottom, right and bottom right corner of the widget window. I also have an option for the window to be transparent, however when transparency is applied the handles no longer become usable. The widget is created as follows: this.window = $('window_'+this.id); this.window.innerHTML = '\ <div id="toolbarAndContent_'+this.id +'" class="toolbarAndContent">\ <div id="toolbar_'+this.id +'" class="windowToolbar"></div>\ <div id="contentWrapper_'+this.id +'" class="windowContentWrapper">\ <div id="content_'+this.id +'" class="windowContentContainer"></div>\ <div id="bottomBar_'+this.id +'" class="windowBottomBar"></div>\ </div>\ </div>\ <div id="resizeSE_'+this.id +'" class="resizerSE"></div>\ <div id="resizeE_'+this.id +'" class="resizerE"></div>\ <div id="resizeS_'+this.id +'" class="resizerS"></div>'; and the transparency is applied as follows: $('toolbarAndContent_'+this.id).setStyle({opacity:0.85}); and ideas why this is causing a problem. This is only a problem in IE, it works fine in firefox. Thanks in advance. I'm not quite sure how to put this question in technical terms, but I'll do my best to show you what I mean. I need to convert all unnecessary html (especially tables) at 'seagull dot net slash services.html' into CSS. Everything was going dandy until I came to the horizontal rules above the text and next to the images. Let me say that again, ABOVE the text, the text being NEXT TO the images. I can't seem to find out how to place the horizontal rules (borders) above JUST the text. It always seems to go above both the the text and the image. I also want the border to start at the end of the image and go all the way to the right end of the page. Any help/bits of code would be greatly appreciated. PS: I wanted to upload an example image, but my ftp program is on the fritz, so I had to paraphrase a url... PPS: By the way, hello all! I'm new here, and I plan to be asking question alot because I'm stuffing my head full of programming this month. I have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } Hello, I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement: .conftabledetail {font-size:10px;} I did that to make the content more compact and distinguishable from the headers. I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs. Apparently this selector does not work when used against a subclass, because I can't get this statement to work: p + p.conftabledetail {margin-top:1em;} I CAN get this statement to work: p.conftabledetail {margin-top:1em;} But that's not what I want to do. Anyone have any ideas as to what I need to change or do differently? It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag... Thanks, Chris I'm experimenting using css, on the page http://www.philmorris.biz/view.php?id=3278941167 The problem I have is the way that each line on the description has its own highlight- something that I've only experienced with css One thing I've noticed is that each line of the description is it's own paragraph, however since the description is pulled straight from eBay, there's not much I can do about that. Are there any obvious things I'm not thinking of? Thanks This site is entirely CSS built and is database driven so it is completely dependent on classes and Id's. I have a conflict with <H5> in this page/site template I'm trying to edit. H5 is used for the title in the header and needs to be white. As you can see by the example of the my news section it looks just as I want it (H5 is the bigger bolder text that starts each paragraph) MyNews.jpg Code: <div class="bodyNews"> <h4>My News</h4> <h6> <h5>News 1</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 2</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 3</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> </div> And here's the CSS: Code: div.myNews {}
h4 {
font: 15px Georgia,serif;
font-weight: normal;
color: #6b3616;
text-transform: uppercase;
display: block;
margin: 25px 0 2px 0;
}
h5 {
font: 14px Georgia,serif;
font-weight: normal;
color: #6b3616;
margin-right: 4px;
display: inline;
}
h6 {
font: 11px/14px Verdana,sans-serif;
color: #3d412d;
margin: 10px 4px 2px 0;
}
So the problem is the H5 though it looks fine in this news part it messes with the header H5 and I can't change the class there... There must be another way to do this... Can anyone offer an alternative? See the site he Template M I have a bunch of text with nice formatting using paragraphs and I want to have a spacing between the paragraphs. I could easily do that by: Code: p { margin-bottom: 25px; }
But that will make it so the last paragraph to also have a margin like that, how can I make it so that the last paragraph have a bottom margin of 0? Just the last one in that bunch of text. Now that, this is dynamic content generated by WordPress. WordPress text is place using paragraphs but the last paragraph on each post also has a margin that shouldn't be there, or my current design of course. Is there a way around this? Hi all, I'm trying to use CSS to apply style to ONLY images that are within paragraphs on my site. Code: <p> <img ... /> </p> In the past, some time ago, I thought I learned that "p img {...}" would accomplish what I'm trying to to. However, it applies the style to all images, not just images within paragraphs... Any one know any other methods? I have a couple hundred images already coded in, so just simply applying a class to the previous images isn't something I'd like to do. Thanks much, dbeg. What is the correct way to remove the space between paragraphs? I have p { margin-top: -12px; } but IE/Win appears to be clipping the top of the topmost paragraph containers. What is the most compatible way to do this? Hi, Why doesn't my vertical nav display in IE? http://www.sabahseaside.com/sti/testindex.php Code: <div id="wrap"> <?php include 'banner.php'; ?> <div id="right"> <div class="prop"></div> <div id="menu"> <ul id="navmenu"> <li><a href="facilities.php">Facilities</a></li> <li><a href="otherinfo.php">Map & Info</a></li> <li><a href="tours.php">Tours</a></li> <li><a href="otherprops.php">Other Properties</a></li> <li><a href="links.php">Links</a></li> <li id="bottom"><a href="contact.php">Contact</a></li> </ul> </div> <div class="clear"></div> </div> <div id="main"> http://www.sabahseaside.com/sti/layout.css I'll admit right off - I don't know much about CSS. I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message. I know my viewers are going to be using IE 6.1. I've looked through here and on google for it, and I think I'm just looking in the wrong place. Thanks. Hi, On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working. I use code similar to this For CSS Code: .nav {
width:172px;
height:32px;
}
td#nhome {
background-image:url(nav-home.gif);
background-repeat:no-repeat;
cursor:pointer;
}
td#nhome img {
visibility:hidden;
}
td#nhome:hover img {
visibility:visible;
}
For HTML Code: <td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td> But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox. Any suggestions on what I should do? Thanks a lot Hello, I'm learning CSS and need some help in solving a simple issue. I have a basic set of 6 thumbnails and I would like a drop shadow background image for each (just experimenting with bckgr images; I know this can be done with CSS). Code:
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #bbb;
}
.wrapper {
height: 400px;
width: 744px;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-image: url(images/glowBg.jpg);
background-repeat: no-repeat;
}
.imageHolder {
height: 400px;
width: 600px;
margin-right: auto;
margin-left: auto;
background-image: url(images/galleryBg.jpg);
background-repeat: repeat;
}
.imageHolder img {
border: 1px solid #999;
margin-top: 50px;
margin-right: 45px;
margin-left: 45px;
background-image: url(drop.gif);
background-repeat: no-repeat;
margin-bottom: 30px;
}
.imageHolder img:hover {
border: 1px solid #F00;
margin-top: 50px;
margin-right: 45px;
margin-left: 45px;
margin-bottom: 30px;
background-image: url(drop.gif);
background-repeat: no-repeat;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="imageHolder"><img src="images/gallery/1th.jpg" width="100" height="100" /><img src="images/gallery/2th.jpg" width="100" height="100" /><img src="images/gallery/3th.jpg" width="100" height="100" /><img src="images/gallery/4th.jpg" width="100" height="100" /><img src="images/gallery/5th.jpg" width="100" height="100" /><img src="images/gallery/6th.jpg" width="100" height="100" /></div>
</div>
</body>
</html>
My problem is that drop.gif for the img tags is not showing up. It is in the same directory as the .html. If you go to http://mydomain/drop.gif it appears, and if you use it for background image of .imageHolder it appears as well so the image/path isn't messed up. I'm beating my head against the wall to get this little thing working. Please help! =D Hi, I am pulling my hair out why the images are not visible on this page http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm It is based on this CSS gallery: http://www.cssplay.co.uk/menu/slide_show.html thank you in advance Raggi Hi, I am using following css to apply vertical scrollbars in some tables: "clear: both; /*overflow: auto;*/ overflow-x: hidden; overflow-y: auto; height: 164px; padding-left: 0px; /*changed_v5*/ padding-top: 0px; /*changed_v5*/ width: 100%; border-bottom: 1px solid #A5B9D1; scrollbar-base-color: #EAEEF4; scrollbar-arrow-color: #506286; scrollbar-DarkShadow-Color: #506286; vertical-align: top;" it seem to be working absolutely fine in IE,safari and firefox but not in Netscape. Can anyone help me regarding this??? Is there any single style which cud work all the 3 browsers mentioned above I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... Why on earth is visibility: hidden; not visible: false; ?? Not only do I have to worry about spelling visibility right and getting all the i's in the right spots, it make javascript that much harder. I have to pass object around rather than flipping a switch. It makes no logical sense IMO to have strings when you would have simply had a bool. Is it for future? Are they going to add 'transparent' and 'slightly visible'? Hopefully something else hard to spell like 'squirrel' CJB |
|||||||