|
CSS - Ie/ff Issue - Content Not Centering In Ie
Seems to be a recurring theme today.
I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem. All content is correctly centered in FF, but not in IE. I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck. Code: #wrapper {
width: 760px;
margin: 0 auto;
}
Any ideas? Similar TutorialsHi, I know this may be a basic question, but I'm apparently one of the last converts from tables to css and I've been searching how to center my site within the browser window. I've currently done all my layout using css and absolute positioning... it looks great, and it sure is easier than tables... but it's as if the site is aligned to run on the left of the browser rather than the preferred center. Should I use something other than "absolute" positioning (too bad if so, because I liked the ease)? Any advice? Thanks in advance for any help. Hi: I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it. Code: <div class="clearfix">
<div style="float: left; width: 25%;">
<a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110" style="border: 0;" /></a><br />
<h3 align=center>The Family</h3>
<a href="the-family.html">Read more...</a>
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Tehran</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Rasht</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." />
<h3 align=center>Gilan Province</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
</div>
Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div. What I want is to center the content of each of those 4 divs. The content is both text and image. Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div. Any help would be appreciated. Thanks. Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site: http://gumbald.co.uk It works fine in FF, but not in IE, so I'm guessing it's a CSS issue My CSS: Code: /*Default CSS file*/
/*Formats <html> tag*/
html {
height: 100%;
overflow: -moz-scrollbars-vertical;
background-color: #BBF;
}
* html #wrap {
height: 100%;
}
/*Formats links to set colors, actions*/
#wrap a:link {
color: #0054A6;
text-decoration: none;
}
#wrap a:visited {
color: #0054A6;
text-decoration: none;
}
#wrap a:hover {
color: #828282;
text-decoration: none;
}
#wrap a:active {
color: #000000;
text-decoration: none;
}
/*Formats <body> tag*/
body {
font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
min-height: 100%;
width: 640px;
margin: auto;
padding: 0;
background-color: #FFFFFF;
border: 0px solid red;
}
/*Formats <h1> tag*/
h1 {
font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
color: #00f;
padding-top: 0px;
margin: 0;
}
h2 {
font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
padding-top: 6px;
}
/*Formats images, is class so can be reused on same page*/
.imgLeft {
float: left;
padding-right: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
.imgRight {
float: right;
padding-left: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
/*Wraps all Divs Up*/
#wrap {
position: relative;
min-height: 100%;
width: 640px;
margin: auto;
background: top left repeat-y;
}
/*Deals with head navigation bar*/
#headwrap {
}
#logo {
padding-left: 0px;
text-indent: 10px;
width: 100%;
height: 42px;
background: #BBF repeat center;
text-align: left;
}
#navbar {
text-indent: 10px;
padding-left: 0px;
width: 100%;
font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
margin: auto;
height: 16px;
padding-top: 2px;
padding-right: 0px;
color: #000;
text-align: left;
background: #DCDCDC repeat-x;
border-bottom: 1px solid #ccc;
}
#navbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#navbar ul {
padding: 0;
margin: 0;
}
/*Deals with side navigation bar*/
#sidenavbar {
float: left;
width: 100px;
margin-top: 0px;
text-align: center;
background: #DCDCDC;
}
/*Deals with main page content*/
#mainwrap {
padding-bottom: 0px;
}
#mainwrap:after {
display: block;
clear: both;
}
#content {
position: relative;
margin-left: 6px;
margin-right: 6px;
padding: 0 10px;
text-align: justify;
}
/*Deals with the footer*/
#footwrap {
clear: both;
height: 68px;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
background: #0054A6 repeat center;
width: 100%;
color: #FFF;
text-align: center;
margin: 0 auto;
}
#footnavbar {
position: absolute;
bottom: 40px;
font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif;
width: 100%;
height: 28px;
padding-top: 8px;
color: #000;
text-align: center;
background: #DCDCDC repeat-x;
border-top: 1px solid #ccc;
}
#footnavbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#footnavbar ul {
padding: 0;
margin: 0;
}
I'm working on my first website. Its a simple portfolio site. I have it mostly completed, but i would like to center all the content in the browser. I found several soulutions to this and I can not seem to get any of them to work. I think it might be stemming from my use of absolute posistioning, but idk, just a newbie here. here is the html; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
</head>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img border="no" src="text/logo.png" alt="logo"></a></div>
<div id="rot"><a href="index.html"><img border="no" src="text/rot.png" alt="rot"></a></div>
<a href="info.html" class="info" title="info"><span class="displace">info</span></a>
<div id="work"><a href="index.html"><img border="no" src="text/worksolid.png" alt="work"></a></div>
<a href="projects/dreaming_again.html" class="thumb1" title="thumb1"><span class="displace">project1</span></a>
<a href="projects/futility.html" class="thumb2" title="thumb2"><span class="displace">project2</span></a>
<a href="projects/grid_dreams.html" class="thumb3" title="thumb3"><span class="displace">project3</span></a>
<a href="projects/transgress.html" class="thumb4" title="thumb4"><span class="displace">project4</span></a>
<a href="projects/curls.html" class="thumb5" title="thumb5"><span class="displace">project5</span></a>
<a href="projects/city_sleeps.html" class="thumb6" title="thumb6"><span class="displace">project6</span></a>
<a href="projects/inner_turmoil.html" class="thumb7" title="thumb7"><span class="displace">project7</span></a>
<a href="projects/transitions.html" class="thumb8" title="thumb8"><span class="displace">project8</span></a>
<a href="projects/detritus.html" class="thumb9" title="thumb9"><span class="displace">project9</span></a>
<a href="projects/emerald_city.html" class="thumb10" title="thumb10"><span class="displace">project10</span></a>
</div>
</body>
</html>
and here is the CSS Code:
#wrapper {
text-align: left;
width:990px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:0px;
border:1px dashed #333;
background-color:#eee;
}
a {
outline: none;
}
#logo{
position:absolute;
top:15px;
left:645px;
}
#rot{
position:absolute;
top:30px;
left:733px;
}
#work{
position:absolute;
top:375px;
left:15px;
}
#info{
position:absolute;
top:285px;
left:15px;
}
a.info {
position: absolute;
top:285px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/info.png");
}
a.info:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
a.work {
position: absolute;
top:375px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/work.png");
}
a.work:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb1+++++++++++++++++++++++++++++++++++
*/
a.thumb1 {
position: absolute;
top:105px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/dreaming_again.jpg");
}
a.thumb1:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb2+++++++++++++++++++++++++++++++++++
*/
a.thumb2{
position: absolute;
top:195px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/futility.jpg");
}
a.thumb2:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb3+++++++++++++++++++++++++++++++++++
*/
a.thumb3{
position: absolute;
top:285px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/grid_dreams.jpg");
}
a.thumb3:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb4+++++++++++++++++++++++++++++++++++
*/
a.thumb4{
position: absolute;
top:375px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transgress.jpg");
}
a.thumb4:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb5+++++++++++++++++++++++++++++++++++
*/
a.thumb5{
position: absolute;
top:465px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/curls.jpg");
}
a.thumb5:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb6+++++++++++++++++++++++++++++++++++
*/
a.thumb6{
position: absolute;
top:555px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/city_sleeps.jpg");
}
a.thumb6:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb7+++++++++++++++++++++++++++++++++++
*/
a.thumb7{
position: absolute;
top:645px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/inner_turmoil.jpg");
}
a.thumb7:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb8+++++++++++++++++++++++++++++++++++
*/
a.thumb8{
position: absolute;
top:735px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transitions.jpg");
}
a.thumb8:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb9+++++++++++++++++++++++++++++++++++
*/
a.thumb9{
position: absolute;
top:825px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/detritus.jpg");
}
a.thumb9:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb10+++++++++++++++++++++++++++++++++++
*/
a.thumb10{
position: absolute;
top:915px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/emerald_city.jpg");
}
a.thumb10:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
Hello, I recently constructed a web page that used z-index property's to stack some transparent PNG files on top of each other. This worked great for me, however there was one thing that bothered me. I couldn't properly center my content after the z-index property was used. I could only manually position the content using left and right x,y co-ordinates. Has anyone discovered a proper way for centering z-index content? -Ben the contents of a div have an undetermined size, it varies. I need to vertically center it as well as horizontally, which I can do the latter of. I can't use padding or margins because I don't know the size. How do I do this? Hi, I'm trying to get my head around this issue, i want the have the main content section centred along with the header and footer but also want an extra bit to the right of the main section for ads (if page is wide enough otherwise they are cut off). How could this be done? Ive attached an image which might help. Thanks, Mike http: //www. cathistevenson.com/bookcoverexpress_mockup/ I want to bring the cover samples over to the left, closer to the blue bar on the left. However, when I do that, the "click thumbnails to enlarge" and "click for more covers" links are then off-centered. How do I keep them centered above the covers, no matter where I position the cover samples? Here's a recent site that I've done: http://landscapeexpertsal.com/ I've tested in IE 7 & 6....& 5.5 (using the multiple IE's installer.) I've also tested in Firefox....as well as safari on my MAC... Everywhere I look, it centers..... This customer still says that the site isn't centered on his machine....all I know is that his PC is "3 years old" according to the sales person.... My container class and body tag are as follows: body { background-image: url(images/BG.jpg); background-repeat: repeat-x; background-color: #cccc66; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: center; } .container { width: 900px; position: relative; margin: 0 auto; text-align: left; background-image: url(images/middle.jpg); background-repeat: repeat-y; } ?????? Here's the link: http://www.EarthArmy.com/index.php I'm trying to center the tshirts/products in the header, but to no avail, they keep aligning to the left. Any ideas? Thanks. I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code:
#topsection {
background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
height: 90px;
}
span.htext {
font-color: #3300CC;
font-size: 30px;
text-decoration: none;
letter-spacing: 1px;
text-align: left middle;
}
anyone know how to fix this. Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much I've run into a brick wall with a problem I'm having regarding text content that's inside a DIV container. To help illustrate the problem I've simplified the code I'm actually working on so that it can be presented here. What's being done: There is a display div tag in which the text content. There is also a transparency layer within the container so I can have a semi-transparent background without having the text content suffer the same inherent transparency. That works fine. What's the problem: Well any text that's in that display div tag doesn't seem to be displaying any of the class formatting I'm putting on it. If I apply the formatting to the display div tag itself it shows. It also shows if I reformat the actual tags (like the <p>) but if I try to use span and apply a class to a specific portion or add a class to the <p> tag it doesn't show. Code sample is as follows: 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" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html {
min-height:100%;
margin:0;
padding:0;
height:100%;
border:0;
}
body {
height:100%;
min-height:100%;
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
background-color:#000077;
background-attachment:scroll;
background-image:url(../site/bkg.jpg);
background-repeat:no-repeat;
}
/* Framing */
#screen{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:705px;
top:268px;
width:149px;
height:182px;
background-color:#000000;
}
#logo{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:156px;
top:18px;
width:503px;
height:45px;
background-color:#000000;
}
#display {
position:relative;
width:650px;
height:auto;
min-height:300px;
margin-left:10px;
margin-right:auto;
margin-bottom:0;
margin-top:160px;
border:1px solid #00ff00;
z-index:1;
color:#00ff00;
padding:5px;
}
#display .transparency {
position:absolute;
margin:-5px;
width:100%;
height:auto;
min-height:100%;
background-color:#000000;
z-index:-1;
opacity:0.75;
filter:alpha(opacity=75;
-moz-opacity:0.75;
}
.formatted {
text-align:justify;
text-indent:2em;
}
.yellow {
color:#ffff00;
}
.white {
color:#ffffff;
}
.yellowbold {
color:#ffff00;
font-weight:bold;
}
.whitebold {
color:#ffffff;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="logo"></div>
<div id="display">
<div class="transparency"></div>
<p class="formatted">Something <span class="yellow">something</span> or <span class="white">something</span>.<span class="yellowbold">Something Else</span>.
</div>
<div id="screen"></div>
</body>
</html>
Any assistance or words of wisdom will be greatly appreciated. Thanks in advance. EDIT: From what I'm gathering it has something to do with the hierarchy revolving around Classes and ID Selectors. Apparently ID selectors take precedence over classes so placing a class on an element contained within the ID selector object doesn't show for some odd reason. What I'm trying to figure out is if it's possible to do at all or am I just shooting for the moon here? Here is the url: http://bradleyrose.net/WaterStreetRestaurant/pages/about_us.html The guy I'm building the site for says when he views the site, the pictures and copy in the 2 columns to the right of the navigation menu get pushed down to where the level of where the contact us button is. He is viewing the site on either IE6 or IE7 Any insight would be greatly appreciated. Close this, wrong forum. Sorry! Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! |
|||||||