|
CSS - Float Problem With Drop Shadow Technique
I am using this:
http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center Similar TutorialsHi ... I'm new here. I hope someone can help me. I've taken a Dreamweaver CS3 3-column template and added a fourth column. Everything looks okay until I move the "main content" column above columns 2 and 3 in the source code (so that it will load before them, because they have external content). Then I get float drop with columns 2 and 3. Since I'm a new user, I'm not allowed to post URLs, but I think if you go to my profile you can see my home page address. Then just add the following paths: Page without float drop (before changing column order) /new/index.html Page with float drop (after changing column order) /new/about.html I tested this on the basic DW template that I started with, and it has the same problem. I ran my page through the CSS validator with only two errors that I can't figure out. However, I get 75 errors when I use the XHTML validator, and I think I'll have a nervous breakdown if I have to try to fix all that. I know it's probably something to do with margins or floats, but I've tried everything I can think of and I'm at wit's end. Thanks in advance. Hi there I am busy making a drop shadow for a div on my site. Works great in everything except IE (well there's a surprise). What I would like to have is a shadow that emanates from a light source directly above the element (figuratively speaking). The shadow will in other words extend in all directions (or ideally to the left, right and bottom, but not the top) from underneath the div. I can't seem to get the spread right in IE. It seems that in IE I can only have the shadow extend in one direction. Here is what it looks like in Chrome, Firefox and Safari (what I want it to loo like) And this is what I have managed to do for IE 7 & 8 And here is the code: Code: #myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}
I have been considering using three different elements each with it's own shadow going in different directions. This means a lot of tweaking to only display these elements in IE, and just seems messy in general. Does anyone have any ideas on how I can solve this in a simpler way? Any advice would be much appreciated Just one of those educational "How Do They Do that?" Questions... Here is my site...(NOT a real business...just a project) My Projekt I was wondering how those drop shadows around the body "frame" are created like the following site: This Site I've looked under different threads, viewed hundreds of lines of page source code and search engine results to no avail. I did find ONE article stating there is a conflict in FF/Netscape using CSS to render these drop shadows correctly. Is there a cross-platform (browser) friendly way to create these drop shadows utilizing my friend, CSS; without having to use 200 1 x 1 px images? Thanks for helping me learn (in advance)...(bows gracefully) PWD Hello am trying to add a black drop shadow to a text whose color is red, how can i proceed with this in css? The text in question is in fact between <h1> tags where the color has been modified to red, but now i want to add a drop shadow in that text using css The original post was asking about how to finish a CSS drop shadow for a box. However, I quickly discovered a solution after posting this comment. The reply below is useful for creating a drop shadow for a box or image of a known height and width. I created a drop shadow CSS code for a box of known width (though with a bit of number crunching in the CSS you can alter it to any) but of variable height. If you want to view the code, go to http://www.wattersisere.co.uk/dev-shed/ CODE TITLE: CSS drop shadow DESCRIPTION: Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images). URL TO CODE: CSS drop shadow I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. I want to add a css drop shadow on flash object (embedded using the object tag) that works with Firefox, Internet Explorer and Safari... anyone know how I can code that or know where there examples of it? TIA Hello, Quick Q: How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples): http://urlgreyhot.com/personal/ http://www.fiftyfoureleven.com/sandbox/weblog/ I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect. Can someone point me to a nice tutorial? I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code. Anyone feel like sharing techniques? Thanks in advance! Cheers M How do I apply a css drop shadow around the search widget generated by this script code? Code: <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>
I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page Osake Restaurant you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato. I have uploaded a screenshot of the layer styles for drop shadow and gradient. Screen Shot Below is some code I found from a tutorial for css drop-shadow - Code:
/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}
/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}
#shadow_1:before {
content: 'In shadow';
}
#second_2:before {
content: 'Happy Shadowing!';
}
/*\*/
html*.shadow {
[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
/*\*/
html*.shadow:before {
[color:red;/* required by Safari.
seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way. Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom Im creating a training log for use by myself and to teach me ruby on rails but Im running into trouble coding the css for the interface. My content box has a significant shadow with rounded corners and Im not sure what the best practice would be to code this. Im running into trouble because when I put the top background piece in it pushes the content down to far while making the transition of the drop shadow from the rounded corner to the edge. I want the content to be 10 px from the edge of the rounded box but in order to get the shading and corners right I need to have a large slice of the top and bottom of the background pushing the content more than 10 px down. Ive tried negative margins but that just brings my repeater background higher up covering the corners. Please let me know if there is a better way in which I can have my content in the right place. thanks in advance! G I guess I cant post a link to a screenshot so I hope I described it well enough... I'm trying to implement bottom-to-top vertical text using CSS attributes in IE : writing-mode: tb-rl; filter: flipv fliph; But I have encountered the following: the text is displayed with a grey shadow (instead of anti-alias). It seems that the problem is caused by the "filter:flip" attribute. Does anyone have a work around? (If I write the same text without the "filter" attribute, the grey shadow disappears but my text is written top-to-bottom!) Here's my stylesheet: .verticaltext{ font-family: Arial; font-size: 13px; font-weight:bold; color:#FF9100; position:absolute; top:1px; height:90px; width: 16px; writing-mode: tb-rl; filter: flipv fliph; } and here's the HTML: <div class="verticaltext">Vertical Text</div> I have also tried to use other CSS3 attributes like: block-progression: ttb; direction : rtl; but they don't seem to work in IE. Does someone know how to remove the grey shadow or know of another way to implement the bottom-to-top vertical text? Hi All, I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area.... The problem has only been introduced since I added a min-width property to my sidebar. I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail. Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content. The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days. If anyone can give me some pointers I'd be very grateful. Jez I did some searches here to see if anyone had posted about a similar problem and didn't find any answers. What seems to be happening is when I apply the clear property to my h2 elements, I get a big float drop in my layout. When I don't use the clear property, there is no drop, but then things are floating on each other that shouldn't. Here are two versions of my page: Without the clear property on my h2s: www. shawkey.com/test/h2noclear.html and with the clear property on h2s: www. shawkey.com/test/h2clear.html Can anyone tell me what's going on here? Hey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John After hours of Google searching and working to find a solution, this is my last gasp. I'll qualify it by saying I'm a casual hobbiest, not a pro at all. In plain text, my problem is that I have a string of boxes I want to appear side-by-side...float: left. In firefox, on a hard refresh, these elements don't appear side-by-side, but on top of each other. It works just fine in IE. Example... Should be: 1 2 Is: 1 2 Below is my code. To see the problem in action, http://www.mcconaha.com Also, the code isn't great, and I know that. I'm building everything now, but can't get past this problem. Code: body{
background-color:#666666;
background-image: url(../images/header-back3.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0px;
}
div#header{
text-align:center;
}
div#nav {
margin-top: 20px; }
div#daybox {
width: 100px;
border: #333333;
border-style:solid;
border-width: 2px;
background: #E0E0E0;
margin-top: 35px;
margin-right: 10px;
margin-left:auto;
float:left;
height: 250px;
display:block;
}
div#daybox p {
font: Arial;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
padding: 5px;
margin: 0;
display: inline;
}
div#dayboxthumb img{
margin: 0;
padding: 5px;
background: #FFFFFF;
border: none;
border-style: none;
display: inline;
}
div#featuredimage {
margin-top: 50px;
}
div#featuredimage img {
padding: 15px;
background:white;
border:1px solid black;
}
div#gallerycontainer {
margin-top: 35px; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
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=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"><img src="images/logo.jpg" /></div> <!-- yeah, it's a table to center it. I spent way too long trying to do it with css --> <table cols="1" align="center" border="0" ><tr><td align="center"> <div id="daybox"> <div id="dayboxthumb"> <a href="http://www.mcconaha.com/upload/2006/10/31/chuq1.jpg" rel="lightbox[lchuqhalloween]" title="smack" ><img src="http://www.mcconaha.com/upload/2006/10/31/chuqthumb.jpg" border="0"></a><a href="http://www.mcconaha.com/upload/2006/10/31/chuq2.jpg" rel="lightbox[lchuqhalloween]" title="smack" ></a> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/31.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>Chuq's office Halloween.</p> </div> <div id="daybox"> <div id="dayboxthumb"> <img src="http://www.mcconaha.com/photos/thumb1.jpg"> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/30.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>This is a test entry.</p> </div> </td></tr></table> </div> <div id="nav"> <img src="images/navmap.jpg" width="257" height="26" border="0" alt="" usemap="#navmap_Map"></a> <map name="navmap_Map"> <area shape="rect" alt="archives" coords="178,0,256,26" href="http://www.mcconaha.com/archives.php"> <area shape="rect" alt="contact" coords="79,0,154,26" href="mailto:contact AT mcconaha DOT com"> <area shape="rect" alt="about" coords="0,0,56,25" href="http://www.mcconaha.com/about.php"> </map> </div> </body> </html> At this point, I have no idea what to do. Given all the Googling, not many other people do either. Any suggestions on this would be helpful if I'm wrong about it being part of a well-known FF bug... Hopefully an easy fix and I'd appreciate any reference links I can bookmark. I have the following site with a navigation bar and content: jimspace.dreamhosters.com/whirligig The content is first in the source with a float: right and the nav bar next in the code with a float: left. In FF the items in the nav bar flow out of the DIV box as they should. When I switch to IE6, the DIV box expands to the size of the longest text causing a float drop. An overflow: hidden solves it, but then of course the nav bar items are cut off. Here's the relevant HTML: Code: <div id="content"> <h2>get whirligigged!</h2> <p>CONTENT</p> </div> <!-- content --> <div id="navcontainer"> <ul id="navlist"> <li class="a"><a href="#">Item one</a></li> <li class="b"><a href="#">Item two</a></li> <li class="c"><a href="#">Item three</a></li> <li class="d"><a href="#">Item four</a></li> <li class="e"><a href="#">Item five</a></li> <li class="f"><a href="#">Item six</a></li> <li class="g"><a href="#">Item seven</a></li> <li class="h"><a href="#">Item eight</a></li> <li class="i"><a href="#">Item nine</a></li> <li class="j"><a href="#">Item ten</a></li> </ul> </div> <!-- navcontainer --> And the relevant CSS: Code:
div#content{float: right;
margin: 90px 25px 0 0;
height: 420px;
width: 700px;
clear: right;
border: 1px solid red;
}
#navcontainer
{
float: left;
width: 200px;
border: 1px solid blue;
}
How can I get this to behave in IE6? |
|||||||