|
CSS - Stupid Little Css Problem ...
at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve.
what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message). look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed. now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue. my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css. i'll also post my code: Code: <div style="border:#ff0000 solid 1px"><!-- full wrapper --> <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper --> <div><img alt="image" src="img.bmp"></div> <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper --> <div style="text-align:center">caption</div> </div><!-- end caption --> </div><!-- end float --> <div style="background-color:#0000ff"><!-- message area --> <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div> </div><!-- end message --> </div><!-- end full wrapper --> thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on. -z Similar TutorialsHey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hi, Here is that affected page: www.wnv2.com/v12.php Look at it in IE and then in FF. Why is it not working in IE? The Code is below! Thanks for anyhelp Code: #navigation {
border-bottom:1px solid #b00000;
width:750px;
height:30px;
margin:0;
}
#navigation a
{
color: #FFF;
background: #b00000;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
font: 12px Geneva, Arial, Helvetica, sans-serif;
height:25px;
}
#navigation a
{
display: block;
float: left
}
/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a
{
float: none
}
/* End IE5-Mac hack */
#navigation a:hover
{
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:25px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
display:inline;
}
#navigation li
{
float: left;
margin: 0;
padding: 0;
display:inline;
}
#navigation a:hover, #navigation a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 0 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:30px;
}
Hi im a relative newbie and am having a really annoying and stupid problem. I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out. any help would be awesome source: kdpatton.com/test.htm Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.) Hope a smartie here can help me out with this one. Thanks. <edit> IE7 also removes the bullets from my <ul>. Any ideas on that also? </edit> Hi, Whats going on with my site in FF? It works fine in MAxthon. http://www.wnv2.com/?wn=tutorials&type=photoshop all the tutorials are messed up ==and== www.wnv2.com There is not bottom!!! Thanks I have this: all my css files in one subdomain, html.website.com all my iamges in another subdomain, images.website.com i link my stylesheet: <link href="http://html.website.com/html/style.css" rel="stylesheet" type="text/css" /> and in the CSS: background:#333 url("../images/bodybg.png") repeat-x fixed top center; does not work. i have to put the whole domain in there? as far as relative paths, since the image is relative from the path of the location of the stylesheet? so I would think ../images/ should work? I am trying to get the logo div to sit on top of the background div with the code before....all I can get the logo to do is sit directly BELOW the header....help! please! PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>golfpeg.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- BODY { background-color: #ffffff; margin: 0px; padding: 0px; } #headerBg { position: relative; top: 0px; left: 0px; background-image: url(/gfx/bg_files/header_bg.gif); width: 760px; height: 102px; z-index: 1; } #logo { position: relative; top: 0px; left: 0px; background-image: url(/gfx/primary_logo.gif); width: 225px; height: 102px; z-index: 2; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td width="760"> <div id="headerBg"></div> <div id="logo"></div> </td> <td> </td> </tr> </table> </body> </html> i hate floats. why are they so tempramental! i want to avoid using tables for layout as much as i can within reason... but sometimes it's really difficult! all i want is for the text to be on the left, and the form table on the right. instead they touch on the corners, or on top of eachother, or anything except what i want. here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Effing Floats!!!!!
</title>
<style type="text/css">
.signupform{
width:500px;
border: dashed green 1px;
}
.formtext{
float:left;
width:100px;
border: dotted orange 1px;
}
.formtable{
float:right;
width:400px;
border: double yellow 1px;
}
</style>
</head>
<body>
<div class="signupform">
<p class="formtext">Your email address and personal information are confidential and will not be sold or rented. See our <a href="#">Privacy Policy</a> for more details. By clicking Continue, you agree to the <a href="#">Terms of Service</a>.</p>
<form method=post action="#" name="signup">
<table class="formtable">
<tr>
<td class="label">First Name:</td>
<td class="label">Last Name:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="firstName" name="firstName" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="lastName" name="lastName" value="" size="15"> </td>
</tr><tr>
<td class="label">Email Address:</td>
<td class="label">Re-Type Email Address:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="email" name="email" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="emailConfirm" name="emailConfirm" value="" size="15"> </td>
</tr><tr>
<td class="submit" colspan="4"><input type=submit value="Continue" class="button"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
(ps: if you are going to tell me not to use a table to format my form elements, then i welcome your solution to get it to look the way i need it to without a table) --edit-- ok, sorry, i guess the problem was that i hadn't accounted for the 6 extra pixels in width due to the borders i gave it. HOWEVER, i still have the problem that the floats are not expanding the div which they are in. thus, if i put this at the end of a page in a content area that has a border, the border will end before the content does, much to my chagrin! does anyone know how to fix that? I'm trying to set up a 3 column template using div tags. I have the floats working quite well, but the floats need to be in a larger div tag (id = siteContent) that has a background color surrounding the site so it creates a padding of color. I can't get that to work. As soon as I set the float the columns are taken out. I pulled out the relevant ID styles for each div tag. Code: <div id="siteContent"> <div id="mainContent"> <!--- Header ---> <div id="headerArea"> <div id="orangeNav"></div> </div> <!--- 3 columns ---> <div> <div id="leftSide" style="float: left; width: 160px;">left</div> <div id="centerSideFull" style="float: left;width: 390px;">center</div> <div id="rightSide" style="float: left;width: 160px;">right</div> </div> </div> <div id="bottomNav" style="clear: both;"></div> <div id="footer" style="clear: both;"></div> </div> OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box. Code: <div id="thebox"> <div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div> </div> So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that: Code:
#thebox {
position: absolute;
left: 500px;
top: 300px;
}
.dbtopleft {
background: url(cb_tl.png) no-repeat;
height: 25px;
}
.dbtopright {
background: url(cb_tr.png) no-repeat top right;
height: 25px;
padding: 0 25px 0 25px;
}
.dbtoploop {
background: url(cb_t.png) repeat-x;
height: 25px;
}
So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE? Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary. I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? Hi guys, I'm new to CSS so pleaz forgive me if the following questions are stupid. 1/ Let's say we have in traditional HTML this: <img src=".."><font class=""><b>French Jokes</b></font> <br> <img src=".."><font class=""><b>French (Freedom) Fries</b></font> <br> <img src=".."><font class=""><b>F*** Jacques Chirac</b></font> <br> <img src=".."><font class=""><b>A bas la France</b></font> Now how should I write that in plain CSS? (I know I cannot use <b>, nor <font> tags). I suppose the <p> tag, correct? Something like: <img src=".."><p id="cat_title">French Jokes</p> <br> <img src=".."><p id="cat_title">French (Freedom) Fries</p> <br> <img src=".."><p id="cat_title">F*** Jacques Chirac</p> <br> <img src=".."><p id="cat_title">A bas la France</p> My problem with CSS is not the table design with float and so on but rather how to lay out a page combining many fonts (some on the same line), some <b> and some <u>'s, some font tags etc. (should I choose <span> rather than <p>?, <div>, rather than <p>, <b> or <strong>, etc, etc ,etc) Thank you for your help. Cheers Andreas I've got limited experience with CSS and I've never done anything with divs, only tables. So my question is really, really, really basic: Not being as adept at CSS as I could be, especially positioning, I'm sort of at a loss as to how to best structure my page using divs. Looking at the comp at http://homework.describe.org/esdcar_home.jpg, would it be best to make everything from the top to the start of the brown bar at the bottom and from the left to the start of the picture one "column" (with nested divs), with everything to the right of the picture's edge a second "main content" column with nested divs inside it? Or should I make one header div that runs from left to right until either above or below the navigation (?), and everything below that point be a 2-column layout (until the brown bar at the bottom)? Does it matter one way or the other? Will it one day be clear to me immediately exactly how best to divide up and structure a page from a comp? Am I just a confused soul, or does everyone kind of struggle with this at the beginning? Sorry to ask such basic questions, but... Thanks in advance. T. Hi all, I need to have two CSS stylesheets that change the background color of my page. All I need to know is the CSS code to change the background color. Cheers. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug Here is the webpage I am working on: http://sulley.dm.ucf.edu/~ebuccianti/iesucks/ As you can see, I have three different DIVs here, the yellow, then the orange, then another yellow. The first yellow is supposed to stop at the same vertical point as the "websites" image. It works fine in Firefox and Opera, but if you view it in Internet Explorer, you will see that the first yellow goes on a little longer than it is supposed to. What can I do to fix this? Here is the CSS stylesheet I used: http://sulley.dm.ucf.edu/~ebuccianti/iesucks/includes/style.css Hello, I'm new here and to CSS too. I've tried to fix this bug I had for a while, but haven't found any decent answers. My problem resolves around this page : http://www.dessinsdrummond.com/house_plans_collection.html In IE, the page seems to appear correctly, however, in Firefox, the white DIV doesn't follow the content of my page, thus the layout doesn't appear very well... I'm guessing it is because the float property is set... I wonder if there is any ways to fix this problem. Thanks! |
|||||||