|
CSS - Ie = Retarded, Issues Inside.
Ok. i've got some odd issues. Mainly with colors (font, and background.)
basically if you refresh the page or load it the first time it looks great. (Minus some strange behavior with IE not wanting to completely fill the background). But when you scroll down or up certain areas have the bg "wiped" away. If you hit the back button to return to a previous page, a lot of the text is not visible, but if you highlight it, then deselect it returns to normal. Very odd issues indeed. I'm completely stumped, this only happens on IE. Firefox and netscape function perfect. http://www.eq2archives.com/quests.php?action=2&qid=862 Go there.... then click any other link on the side menus. then hit the back button. you'll see what i mean. very odd. Now here's the css file that fuels it. It wouldn't let me paste it here, too long. Ill have to include it in an external file. Inside attached file is the CSS code first, and the page source next. Thanks in advance.. This is such a strange issue ive never seen anything like it before. About to say f-u-c-k you IE and put a firefox button on my page. Similar TutorialsI cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
Hello, This look good on IE not on FF, why? 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>
<style type="text/css">
div#username {
position:relative;
width:508px;
height:72px;
margin:2px;
padding:4px;
border:1px #CCCCCC solid;
border-bottom-width: 20px;
}
</style>
</head>
<body>
<div id="username" >div<br />div<br />div<br />div<br />div<br />div<br />div<br />div<br />
</div>
</body>
</html>
I need several div's inside each other, to be padded 10px. I use the code bellow and the result is in image here , I also drawn what I want to accomplish. Can you help me ? PHP Code: .class-help_section_method { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#E1F9FF; padding:10px; width:100%; } .class-help_section_method_sub { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#FFFFFF; padding:10px; width:100%; } .class-help_section_niv { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#F3F3F3; padding:10px; width:100%; } I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center. Will someone please assist me in getting this centered? EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div. HMTL code Code:
<div id="nav">
<div class="menu">
<ul>
<li><a class="hide" href="#">Top 1</a>
<ul>
<li>Sub Top 1.1</li>
<li>Sub Top 1.2</li>
</ul>
</li>
<li><a class="hide" href="#">Top 2</a>
<ul>
<li>Sub Top 2.1</li>
<li>Sub Top 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
CSS code Code:
#nav{background-color:Blue;height:35px;width:auto;text-align:center;}
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Can I put my BAR in your FOO?</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div#contents
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black; /* visual aid */
}
div#thumbnails
{
border: 1px solid red; /* visual aid */
}
div#thumb
{
float: left;
}
</style>
</head>
<body>
<div id="contents">
<div id="thumbnails">
<div id="thumb"><img src="image1.jpg" /></div>
<div id="thumb"><img src="image2.jpg" /></div>
<div id="thumb"><img src="image3.jpg" /></div>
<div id="thumb"><img src="image4.jpg" /></div>
</div>
</div>
</body>
</html>
What I am trying to do is have the collection of "thumb" divs align in the center of the "contents". The number of "thumb"s will vary and I want them to fill the width of the screen no matter what width that may be, and change when the size of the window is changed. I realize that the float: left is pushing them to the left, but it's my understand that is how you get divs to appear side-by-side. So I figured I could enclose them in another div ("thumbnails") and then center it inside "contents", but "thumbnails" doesn't even seem to enclose the "thumb"s unless I specify a width, which I can't do because the number of thumbnails changes, and if I specify a width that is too big, the thumbs float back to the left and the extra containing div "thumbnails" is pointless. So, how do I get the "thumb"s to be side-by-side and have that collection of "thumbnail"s centered on the page, while still keeping things liquid? Currently working in IE6, but looking for support in IE5x, Opera, and Gecko based browsers. I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley Thanks for taking the time to read my question. I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible? Here is what I have so far... datacontainer is not growing when piccontainer grows. HTML: Code: <body> <div id="datacontainer"> <div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div> Data</div> </body> CSS: Code: body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}
#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}
#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}
I have a fixed-width site and the content is enclosed inside a 750px div. I need to center a div inside that main container. I know I can use margin and text-align but then all of the divs in the main container will be centered where I only want one div to be centered. Any help would be much appreciated. Thanks! Hi All, How can I enable the inside bordder of a TD in html. Thans in advance I'm setting up a website order form, and using CSS for formatting. I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament: What it currently looks like Picture 1 What I want it to look like Picture 2 Structure of the DIV boxes Picture 3 The code for the boxes is he Code:
<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>
<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">
<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">
<TABLE class=dataFile border=0>
<FORM name=module action=cart.php?action=confirm method=post>
<TBODY>
<TR class=listColor>
<TH>1:35</TH>
<TH class=listHighlight>AFV</TH>
<TH>AU$30.00</TH>
<TH align=right>QTY
<INPUT type=textField size=3 value=1 name=qty>
<INPUT type=submit size=3 value="Add to Cart" name=submit>
<INPUT type=hidden size=3 value=t35064 name=id>
</TH>
</TR>
</TBODY>
</FORM>
</TABLE>
</DIV>
I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further) Sample Page Page Stylesheet I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page! I've been stumped for days on this, and it's delayed the page's launch. If anyone can help me... it'd be very much appreciated. Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila I am trying to simulate a vertical table using divs and css, but I can't figure out how to center elements. How do I center (horizontal and vertical) these 3 boxes inside the 3 frames? Code:
<html>
<head>
<style>
.frame {
width: 200px;
height: 200px;
border: 2px solid black;
}
.box1 {
width:50px;
height:50px;
background-color: red;
}
.box2 {
width:100px;
height:100px;
background-color: yellow;
}
.box3 {
width:150px;
height:150px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div class="frame">
<div class="box1">Box 1</div>
</div>
<div class="frame">
<div class="box2">Box 2</div>
</div>
<div class="frame">
<div class="box3">Box 3</div>
</div>
</div>
</body>
</html>
Hi, This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page. I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu. I imagine there is a way to get two column layout ysing just DIVS. . . I use my site for school, I'm a high school teacher & I teach some university coursework. My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.) sitenav : left hand nav_bar (for site-wide) entry : min content sidebar: Right hand sub_nav_bar (within this area) ----------------- div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%; font-size: 11px; background-color: white; border: 1px solid red; z-index: 10;} div#entry { color: #660; margin: 0 20% 1em; padding: 0 } div#sidebar {position: absolute; top: 4em; right: 0; width: 20%; font-size: 11px; z-index: 11;} ---------------------- http://www.mrplatts.com/pitt_tech/schedule.html any help? Thanks, Rich Hello all... I need to have one of my div's of my layout contain two separate columns. My layout has 3 columns and in the center main content column I need to split it in half to display list items. Part of a sitemap. I have this and it is not working. The boxes are working and in the proper horizontal alignment but they are not equal vertically. Ideas? Code: <div id="contentcenter"> <div style="background-color: #006666; float:left; width: 185px; "> <p>testing</p> </div> <div style="background-color: #000000; margin-left: 189px; width: 185px; "> <p>testing</p> </div> </div> How do I make a div go to 100% height cross browser? I have a layout like this: ----------HEADER------------- NAVHOLDER | NAV(div inside holder) | NAV(div inside holder) | | | | ----------FOOTER------------- cheers. This is the first website I'm trying to make compatible with all browers so I'm running into a few new things. Positioning a div inside another div: I usually use margins to position the second div where I want it, but I noticed this doesnt work in firefox, safari, opera, etc. Only IE. Which I know IE is the problem not the other browsers. I did switch to padding rather than margins and it got the desired effect across all browsers. Is padding the right way to go? Just want to make sure before I keep going forward with it. Thanks. Hi, This will be a quick question. Why cant I style ul inside a div as: .css-tabs { margin:0 !important; padding:0; height:30px; border-bottom:1px solid #666; background:#EFEFEF none repeat scroll 0 0; } <!-- Left column --> <div class="floatLeft width73"> <!-- the tabs --> <ul class="tabsss"> <li><a href="#first">Tab 1</a></li> <li><a href="#second">Tab 2</a></li> <li><a href="#third">Tab 3</a></li> </ul> </div> I explain my issue in detail he colorandinformation.com/~pressfor/csshelp.htm New to CSS and could use some help with this, thanks. |
|||||||