|
CSS - Stupid Css Problem (can't Find Problem Div/class In Stylesheet)
Hey,
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. Similar Tutorialsat 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 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;
}
Im kinda new in CSS so sorry if this is a noob question Im having trouble making an external stylesheet because for some reason my html is just not loading the .css file. But I also read that an external is a little slower aswel if i'm not mistaken, because it has to read another file. But I'm in the internal stylesheet is working good but I noticed I can't create a new class using the "." before the word. Is there anyway I can create a class using the css inside the html file? Hello, I have created a design in photoshop which has been sliced into a number of smaller images. I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is: Code: td.tablebackground
{
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat;
width:40;
height:10
}
This works fine in IE6 but doesn't show in Firefox. Can anybody please suggest a way around this? I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is: Code: img.tablebackground
{
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat;
width:40;
height:10 ;
border-style:none; // also tried border:0;
}
Many Thanks, J hi all ... i am trying to hide the link of "Price" and "Broker" from the class "CONTENT" ... however it doesnt work with it . What wrong with my code? i am a new css learner ... sorry for troublesome ... CHEER <html> <head> <title>Stock</title> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <style> .CONTENT:link {display : none ! important;} </style> </head> <body> <tr class="MarkColor3" valign="top"> <td class="CONTENT" valign="top" width="35"> 1234</td> <td class="CONTENT" valign="top" width="140"> XXX Cop. Limited </td> <td class="CONTENT" valign="top" width="55"> 5.050</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />0.075</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />1.508%</td> <td class="CONTENT" valign="top" width="69"> 707,730,172</td> <td class="CONTENT" valign="top" width="198"> | <a href="../a.html">Price</a> | <a href="../b.html">Broker</a> | </td> </tr> </body> </html> i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim I have a very strange problem. My firefox is ignoring the changes I made to the style sheet. I have this in my webpage and the style.css file location is right (one directory up). <link href="../style.css" rel="stylesheet" type="text/css"> Because it's ignoring my new changes, I deleted everything in my style.css file, and the page still displays as though the file exists. However, if I delete the above line, then the page will display without any style. IE is loading with the changes I made though. I have also checked my stylesheet with the W3C css validation and it has no error. So, any body know why this is happening? 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 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 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 was wondering does anyone know where I can obtain the Internet Explorer 6 stylesheet for Windows XP? The UI components in IE6 look different in Windows XP than IE6 for Windows 2000. I would like to obtain the stylesheet if it is available somewhere. Thanks for your help. Val I have three different css Stylesheets. Now I want to give access to my users to change their required styles using dropdownlist. And next time when the user is login in the same last selected style sheet should be displayed to him. How can i do this please help me its urgent ? 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? 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 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'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> 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? Hey all, a few probs here. My new webpage coded with stylesheets: http://www.stocksbridgepentaqua.co.uk/test/index.php It looks good in IE and bad in FireFox (mozilla) its not a major problem because the ppl im targetting are using IE. Next, on this page: http://www.stocksbridgepentaqua.co..../index.php?id=9 I want a scroll bar in the actual window instead of it making the box massive. And another thing, how do I make a space between the bottom of the website and the bottom of the browser? Thanks. Jack. |
|||||||