|
CSS - Content Container's Shadow Displaying Differently ???
I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).
Presently looking page can be seen on: http://allinclusivewebdesign.byetho...esign/about.php The related CSS code is: Code: #centerContentContainer
{
width:100%;
}
#centerContentShadow
{
background:url(content-shadow.jpg) #FFFFFF;
width:760px;
float:left;
}
#centerContent
{
background:url(contentbackground.jpg) #FFFF00;
color:black;
text-align:center;
position:relative;
width:700px;
margin-left:30px;
float:left;
border-left:1px solid #999999;
border-right:1px solid #999999;
}
And to display it within each html files, I've got: Code: <div id="centerContentContainer"> <div id="centerContentShadow"> <div id="centerContent"> Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from: http://allinclusivewebdesign.byetho...esign/about.php while in Internet Explorer this "centerContent" drags down. In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byetho...esign/about.php) I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border. Similar TutorialsHi there, I have some CSS tabs, but they are displaying differently in IE7 than FF. This is my code: PHP Code: #nav { float:left; width:100%; background:yellow; height: 27px; font-size:93%; line-height:normal; list-style: none; margin: 0px; } #nav li { float:left; background:url("images/tab_left.jpg") no-repeat left top; margin:0; padding:0px; list-style: none; } #nav a, #navheader strong, #nav span { display:block; background:url("images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; } and my html: PHP Code: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Any ideas whats causing these different outcomes? My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance. Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester I've losing my mind on this. When I look at the following layout in IE6, the "matterR" DIV background color is filling up the entire "content" DIV -- as opposed to staying in its container DIV ("columnR") like I need it to. Any idea why it's bigger than it's container DIV? Code: #content { margin-right: 10px; margin-bottom: 5px; margin-left: 10px; width: 780px; overflow: hidden }
#columnR { width: 595px; height: 308px; float: right; overflow: auto }
#matterR { background: #6d6f71; padding: 20px 20px 40px 70px }
<div id="content">
<div id="columnR">
<div id="matterR">Scrolling text content here...</div>
</div>
</div>
Keep in mind that I can't really assign a pixel width to "matterR" -- as its container DIV needs to scroll vertically. It seems if I assign a pixel width, it want to scroll horizontally to compensate for the scrollbar. Any ideas? Thank you! Ok, I have three problems with this test page. 1. How do I force the logo to be always to the extreme left (just over left container) whilst ensuring the menu options stay on the right side? 2. How do I force the menu options to vertically align to the bottom? (So that their baseline matches the baseline of the logo) 3. In FF the right side image is correctly displayed in the right-side container, but in IE the images somehow ends up directly below the left side image! Any idea where I'm going completely wrong? If anyone has sometime to have a look here a a link containing the test page content in a zipped file...zipped test page For reference, I'm testing this with the following browsers... IE 6.0 FF 2.0 Thank you in advance. PS. I can create a page with this (and more complex) layout easily using the html "table" tag (it's what I've been doing for at least a few years), but we don't do things like that any more so I thought I'd better get with the scene and master this div thing once and for all! Using "table" tags for layout is so last century! Well here is my problem... I'm trying to do a fluid design with complete css. All is fine, however when I view my page I can't get the content to fill an entire area. I tried to use a width:100% but that stretches it way too much and it goes over the container div. What I want is for it to go the container div but not over, is there any way I can do this with the current layout? I would post the code but tis a lil big so would be easier to just direct you to my site. I have tried many different thing but to no avail. Any help would be greatly appreciated. TiA -BoNfiRe HI, Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go). The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet. (URL address blocked: See forum rules) The CSS is embedded in the head of the page. Any help is much appreciated, Regards Fiona Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. I just can't seem to figure this out! it is driving me nuts! The page I am working on is he http://www.iskippedlunch.com/z_test/index_2.php and the style sheet is he http://www.iskippedlunch.com/z_test/styles/shfb_basic.css I am using php to import sections into the page. For some reason when I include the Client Story (blue) section on the homepage all the content in the green sidebar gets pushed way down the page in a couple versions of IE6. I have narrowed the problem down to this area of code, it is the only part that makes the page go wonky. I even rewrote the CSS, but I must be missing something. The lower levels of the site are based on this home page, and have the same problem if the main (white) content is long. You can see how some have the problem and some display correctly. Help will be greatly appreciated, my eyes are getting crossed! PS, on some of the lower level pages, the (orange)footer background creeps up the page! This is new! hi, i have a container div, set at 50% opacity. i want my content to apear in here, but be 100% opacity. i thought this would work, but it doesn't... any help? #transContainer { background-color: #FFF; margin-left: auto; margin-right: auto; width: 982px; padding: 7px; height: 100%; padding-top: 0; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #mainContainer { background-color: #ccc; padding-top: 10px; margin-left: auto; margin-right: auto; width: 968px; height: 94%; filter:alpha(opacity=100); -moz-opacity:1.0; opacity: 1.0; } Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Thanks for taking the time to read my question. I have a box in which I have text. I would like to make that box look like it has a shadow to the bottom right. I can't seem to figure out how to do that with my CSS. here is the <div> and my CSS Code: <body> <div id="MainContainer"> <div id="Title">Landmark Feeds - Links to Standard Operating Procedures</div> <hr /> <div class="dtree"> <p id="TreeLinks"><span><a class="QuickLink" href="javascript:%20d.openAll();">Open All Folders</a> <a class="QuickLink" href="javascript:%20d.closeAll();">Close All Folders</a></span></p> <p id="TreeLinks"><span><a class="QuickLink" href="javascript: d.openTo(1, true);">Open Terms</a> <a class="QuickLink" href="javascript: d.openTo(2, true);">Open Payment Schedules</a> <a class="QuickLink" href="javascript: d.openTo(3, true);">Open SOP's</a></span></p> <p><script type="text/javascript" src="JavaScript/dtreeDocWrite.js"></script></p> </div> <hr /> </div> <div id="CR">Last Updated: February 28, 2006</div> </body> Code: #Title {
font-size: 26px;
color: black;
border-width: 3px;
border-color: #d81f03;
border-style: solid;
margin-top: -55px;
margin-left: 0px;
float: left;
background-color: #F5F5F5;
padding: 5px;
}
Thanks, Brad Hey everyone. First of all, I apologise for imposing on you another question about drop shadows in CSS. I have tried my hardest with what I've been trying to achieve here (including using the resources that gave me the info to use this technique in the first place) but I've hit a brick wall. Allow me to demonstrate: http://www.hrfc.org.uk/test2/index.htm At the top right of the content, there is a box I've created, within which the ultimate user of this site will be able to put screen shots, and then type their captions below. Ideally, I want to be able to have this box (.grabcontainer in the CSS) have a drop shadow. I was able to achieve a drop shadow for the <img> on its own (as can be seen by scrolling further down the page to the image at the bottom)... but I can't think of a way of extending this technique so that it works for my .grabcontainer class. If anyone has any suggestions I'd really appreciate it. I've played with this all day but every attempt normally ruins the careful arrangement of the divs. Thanks for reading Eldoc I've got a div tag that I show and hide on an accessKey press. It is used for special navagation in the site. The div tag has a background color defined in the CSS. The background color only shows up in FF. I know I'm using tables when I don't need to, and this is pretty sloppy right now.. but I'm going to clean it up a bit... I just finished writing a function to keep the div tags above select elements in IE and haven't had a chance to do the cleaning up yet. But I think my problem is probably very simple and is something stupid in my style sheet or some behavior of IE I don't know about or have forgotten about. Code:
<div id="gotoSmall"><input type="image" id="hiddenGoTo" src="<c:out value='${pageContext.request.contextPath}'/>/images/XXXXyyyy/empty.gif" name="hiddenGoTo" accessKey="g" onfocus="showHideGoto('show');"/></div>
<div id="gotoDiv">
<form name="GoToScreen" class="form" onsubmit="javascript:return goToNextScreen(this,'<c:out value='${pageContext.request.contextPath}'/>')" method="post">
<table class="goToTable" id="gotoTable">
<tr>
<td align="right" nowrap="nowrap">
<label class="XXXXGoToLabel" id="goTo">go to</Label>
</td><td>
<input name="screenName" autocomplete="off" class="XXXXGoToInput" id="XXXXGoToInput" type="text" onblur="return toUpper(this);" size="12" height="20px" value="" maxlength="12" tabindex="-1"/>
</td>
<td>
<input type="hidden" name="XXXXActionOrTab" value="Refresh"/>
<input type="hidden" name="useSessionKeys" value="true"/>
<input type="hidden" name="backButtonCheck" value="pageLoad"/>
</td>
</tr><tr>
<td align="center" colspan="3">
<table>
<tr>
<td align="right">
<input type="submit" name="GoTo" value="Goto" onclick="buttonClick(this);"/>
</td><td align="left">
<input type="button" name="cancel" value="Cancel" onclick="showHideGoto('hide')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Code:
#gotoDiv{
display: block;
left:450;
top:200;
z-index:10000;
width:204px;
height:54px;
visibility:hidden;
position: absolute;
background-color: grey;
}#gotoSmall{
display: block;
z-index:10000;
width:0px;
height:0px;
position: absolute;
}
.goToTable{
width:200px;
height:50px;
background-color: #e0dfe3;
border: 1px solid black;
border-style: groove;
border-spacing: 0px;
border-collapse: collapse;
}
Hi: I'm trying to create text with a drop-shadow without having to resort to an image. I have found the "shadow" command for CSS and have used it as such: Code: p.title_drop_shadow_yellow {
margin:0px auto;
font-family: Biondi, Serif;
text-transform: capitalize;
font-variant: small-caps;
width:650px;
filter:shadow;
color:#FBDE80;
font-size:250%;
}
This gives the desired effect in MS Internet Explorer (granted the color choice needs some work) but it gives no effect at all in firefox. Does anyone know how to make this work on other browsers? Is there another way to get a drop-shadow? Thanks. Not working in mozilla This does not render well in Mozilla Firefox, but is okay in IE. Please Help Us........ Hey guys I'm new here, so I apologise if I do something wrong or write something! Anyway, I have a small query regarding CSS on my website. It is valid CSS before you ask and th eproblem is - I have a shadow which is meant to appear on my website and in IE6 it does not. It is an image that is a height of 2 and then i want it to be height 100% so it fill sup the container it is in. So, border-left and border-right are in the container 'page' and do not show up (but they do in opera, firefox, safari, ie7 and netscape) Another problem in IE6, is the 100% width issue, anyone know how to fix this too? (all the widths that are 100% on the page, i tried to fix it in the IE6 fixes but it didnt work) Any ideas? The code is below Code: #header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-image: url(images/headerbg.gif);
background-repeat:repeat-x;
height: 128px;
z-index: 1;
}
#logo {
position:relative;
width:231px;
height:94px;
margin-left: auto;
margin-right: auto;
background-image: url(images/logo.jpg);
}
#menuspacer {
position: absolute;
top:110px;
left: 0px;
height: 41px;
width: 100%;
z-index: 2;
border-bottom: 1px solid #FF8000;
}
#menubg {
position:relative;
top:116px;
height: 25px;
width: 500px;
margin-right: auto;
margin-left: auto;
z-index: 3;
border-left: 1px solid #FF8000;
border-right: 1px solid #FF8000;
border-bottom: 1px solid #FF8000;
background-color:#FFFFFF;
}
#menufakeborder {
position:relative;
top:89px;
height: 20px;
width: 500px;
margin-right: auto;
margin-left: auto;
z-index: 4;
border-left: 1px solid #ffcb9d;
border-right: 1px solid #ffcb9d;
}
#menucontainer {
position:relative;
top:0px;
height: 23px;
width: 500px;
margin-right: 0px;
margin-left: 0;
z-index: 5;
}
#menu li
{
display: inline;
list-style-type: none;
padding-right: 9px;
margin-left: auto;
margin-right: auto;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color: #550000;
text-decoration: none;
text-align:center;
z-index:6;
background-color:#FFFFFF;
}
#photobg {
position:absolute;
top: 152px;
left: 0px;
width:100%;
height: 161px;
background-image:url(images/horsebg.gif);
background-repeat:repeat-x;
z-index:2;
}
#horse {
position: relative;
top: 91px;
margin-left: auto;
margin-right: auto;
background-image:url(images/horse2.jpg);
width:1035px;
height: 161px;
z-index:2;
}
#border-right {
position:absolute;
top: 0px;
right: 137px;
width:22px;
height:97%;
background-image:url(images/border-right.gif);
background-repeat:repeat-y;
z-index:2324235;
background-color:#003366;
}
#border-left {
position:absolute;
top: 0px;
left: 137px;
width:20px;
height:97%;
background-image:url(images/border-left.gif);
background-repeat:repeat-y;
z-index:512;
}
#border-left-end {
position:absolute;
bottom: -18px;
left: 139px;
width:18px;
height:58px;
background-image:url(images/border-left-end.gif);
z-index:1;
}
#border-right-end {
position:absolute;
bottom: -18px;
right: 141px;
width:18px;
height:58px;
background-image:url(images/border-right-end.gif);
z-index:1;
}
#horse-tail {
position:absolute;
top: 161px;
left: 63px;
width:94px;
height:61px;
background-image:url(images/horsetail.gif);
z-index:1;
}
#footer {
position:absolute;
bottom: -175px;
width:100%;
height:22px;
background-image:url(images/footerbg.gif);
background-repeat:repeat-x;
left: 0px;
border-top: 1px solid #FF8000;
z-index:0;
}
#footer-text {
position:relative;
bottom: 3px;
width:420px;
height:22px;
margin:0 auto;
z-index:2;
border-right: 1px solid #FF8000;
border-bottom: 1px solid #FF8000;
border-left: 1px solid #FF8000;
background-color:#FFFFFF;
}
#page {
position: relative;
top: 0px;
left:0px;
margin-left: auto;
margin-right: auto;
height: auto;
width: 1035px;
z-index: 0;
}
and the fixes for IE at present: Code: #header {
width: 101.5%;
left:0px;
}
#photobg {
width: 101.5%;
left:0px;
}
#menuspacer {
width: 101.5%;
left:0px;
}
#menu
{
list-style-type: none;
margin-right: auto;
width: 498px;
margin:auto auto;
padding:0px 0;
}
#menu li {
display: inline;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#footer {
width: 101.5%;
left:0px;
}
#border-right {
right: 136px;
}
and the HTML; Code: <div id="header"> <div id="logo"></div> </div> <div id="menuspacer"></div> <div id="menubg"> <!--[if ! IE 6]><div id="menucontainer"><![endif]--> <!--[if IE 6]><div id="menucontainer" align="center"><![endif]--> <ul id="menu" align="center"> menu items </ul> </div> </div> <div id="menufakeborder"></div> <div id="photobg"></div> <div id="horse"> <div id="horse-tail"></div> </div> <div id="page"> <div id="border-right"></div> <div id="border-right-end"></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> content <p> </p> </div> <p> </p> <p> </p> <div id="border-left"></div> <div id="border-left-end"></div> </div> <div id="footer"> <div id="footer-text" align="center"><img src="images/footer.jpg" /></div> </div> Thanks so much and looking forward to a reply soon!! |
|||||||