|
CSS - Is There One Simple Answer
Hello Everyone,
I have created a site that was started as one large graphic. I used CSS, a fixed width 3 column layout, and the site is breaking in IE6 and IE7. It is rendering fine on the PC in Netscape 6, 7 and 8; Opera 9.10 and Firefox 2.0.0.4 and on the Mac in Netscape 7.2, Safari 2.0.4, Firefox 2.0.0.2 and Opera 9.10. My simple question is this: is there any way to get this site to render properly in IE 6 (btw, when I upgraded to IE7, in the About IE7 dialog it says IE6...) without having to use hacks? Is it my code even though everything validates? Or is it IE?? I would rather not use hacks and have been thinking about sending IE users to a page asking them to download another browser because I really don't want to create another site just for IE users and I don't know where to begin with the hacks. It just seems strange to me that the browser that most people use in the country doesn't render a validated site correctly... Any comments will be helpful. Thank you! Jen Address of site: www.berkleecitymusicnetwork.org Similar TutorialsI really want to know how to replicate this effect for my blog *** URL Removed *** any ideas? specifically the jagged edges on each photo along with the drop shadow and how the hell is every photo at a random angle?? your help is much appreciated. thanks I know that this is probably a simple solution, but I have been looking at the coding so long I cant figure it out. What we are trying to do is this. We wanted to create a FAQ page that was just a little bit different than the norm, so instead of just having links, we wanted links, that if clicked would open under the question with the answer. I found some code online and now cannot remember where I got it, for a horizontal menu using only css. I altered it some and got it to work correctly in IE. I know that this is probably because IE allows major screw ups, but most of the users are IE. Foxfire on the other hand does not show the same way. I can handle it not behaving the same, if I could just get it to work at all. The code is located at sky.prohosting.com/jade1977/htmlFiles/faq.shtml If someone can alter this to work in mozilla or give me alternate code that work similar I will be yours for life. Thanks!!!!!!!! I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this click here When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? San I have sworn that I will not use tables. Don't let me give up and use them. I want a simple header at the top of the page. The header consists of two boxes. The left one contains a logo. The right one contains some html code. The right one needs to go butt up against the left one. I have the following: Code:
#header {
position: absolute;
top: 0;
left: 0;
height: 200 px;
width: 779 px;
}
#header #logo {
background-image: url(../images/gcxn_logo.jpg);
top: 0;
left: 0;
background-repeat: no-repeat;
width: 368 px;
height: 200 px;
}
#header #summary {
top: 0;
left: 368 px;
height: 200px;
width: 411 px;
}
and my html looks like this: Code: <div id="header"> <div id="logo"> <a href="http://localhost/...."><img src="transp.gif" border="0" height="199" width="300"></a> </div> <div id="summary"> <ul> <li><a href="....">A</a> <li><a href="....">B</a> <li><a href="....">C</a> <li><a href="....">D</a> <li><a href="....">E</a> </ul> <a href="....."><img src="img.gif" border="0"/></a> </div> </div> How can I make the summary block go BESIDE the logo block and not below it! I give this 30 more minutes then I hae to use tables and get on with REAL work I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with. In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line Quote: property bgcolor doesn't exist : #666666 This is my CSS code: Code: td.corner {
bgcolor: 666666;
height: 30px;
width: 15px;
}
I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated! Thanks! So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** Thanks in advance! Fairly straightforward problem: I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div. Anyway to set the content as fixed and just have the user scroll if the browser is too small? Thanks! Ohh.. and both divs the "blankDiv" and "header" are floated left... Code: #blankDiv{ width:10%; background-image:url("../images/header_tile.png"); background-repeat:repeat-x; height:224px; float:left; } #header{ float:left; }
I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem: img386.imageshack.us/img386/1795/ddddye5.png As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS: Quote: #maincontentleft { float : left; width : 252px; height: 100%; background-image : url("images/sidecontentbg.gif"); } #sidecontentbg { background-image : url("images/sidecontentbg.gif"); padding-left : 15px; padding-right : 15px; height: 100%; background-color: red; } #sidecontenttop { background-image : url("images/sidecontenttop.gif"); } #footer { padding-top: 5px; padding-bottom: 5px; background-color : #ebebeb; height : 35px; border : 1px solid #dbdbdb; text-align : center; } The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom. Hi, I see something like this, span.small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> my question is why they put the word span. Why not do .small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> Hello ;> Basicly I'm trying to make several <p>s, that are situated 1 under the other. Each of them must hold 1 image that is on the LEFT side, so the text of the <p> will be on the right side of the image. [image] text <p> <img /> </p> thats how i did it. However when i put float: left, to the image as to fix it the IMG from the <p> below the 1st <p> overlaps the other so i tried and made a <div> between the <p>s with clear:both The problem with that is that IE leaves space between the <p>s while FF and Opera doesn't. Any way to fix that? Or a more correct way to do it ? Thanks! I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks Hi... I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance hye peeps i need to create a external css for my website www. losttv . 50webs. com would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books? any advise would be SO welcome ricki This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer. I have this page - vitalmodels (DOT) com/V3/ The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions? Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing. Again, I REALLY appreciate any help I get here... thanks again. -Ryan This is the code if you need it - PHP Code: #index_left_column { padding: 0px; float: left; height: auto; width: 194px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; left: 16px; background-image: url(images/index/left_column_bg.jpg) and PHP Code: <div id="index_left_column"> <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p> <?php include("inc/m_female.php"); ?> <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_male.php"); ?> <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_photographer.php"); ?> <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p> </div> I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong. First heres the links: (and yes this does involve CSS): http://65.26.50.204/ec/index.php - My Layout (View Source) http://65.26.50.204/ec/stylesheet.css - The CSS One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS? Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it? Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what? Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? Hi really nw to using css just starting out today lol. So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas. Code:
<body>
<div id="level0">
<div id="level1">
<div id="topBar">This is the top navigation bar.</div>
<div id="advBar">
<div id="mod1">2323 frwef sdf</div>
<div id="mod2">s dfs dfsd fsd fsd f</div>
</div>
</div>
</div>
</body>
Code:
body {
margin:0px 0px 0 0px;
padding:0;
background:#FFF;
}
#level0 {
background:#FC0;
}
#level1 {
padding-left:9px;
padding-right:9px;
margin-left:300px;
margin-right:300px;
background:#FFF;
}
#main {
background:#CCC;
}
#topBar {
padding: 10px;
background:#FC0;
}
#advBar {
padding: 10px;
height: 90px;
background:#FFF3AC;
}
#mod1 {
border: 1px solid red;
float: left;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
#mod2 {
border: 1px solid red;
float: right;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
|
|||||||