IE 6 & 7 Won't Center this Div...

Some pages on this poetry site are not centering in IE6 and 7.
http://www.pictopoetry.co.uk/2011/01/fearsome-face/
It's not the same for all pages. I just can't seem to find the fault.
Thanks
Martin

Thank you Gary & Hans
I think that I have sorted that problem anyway. I just added a text-align:center to the body element.
With the reducing IE6 usage, I accept the point entirely but with this site, I'm not sure that there isn't a code error in there somewhere! Still, maybe you wouldn't mind taking another look because whilst I was fiddling with that, I noticed another problem in the navigation. There's a sparkly underline there and the transparent .png background doesn't seem to show.
Thank you for your interest.
Martin

Similar Messages

Can I center 2 divs over each other??

OK, I've built a website completely in Flash and I'm trying
to lay it out with dreamweaver so that when viewed on 800x640
resolution maxed browser window it will fit snug without any
horizontal scrollbar (the SWF's is fit to this standard); and when
viewed on 1024x768 maxed window it will be centered in the window
PLUS have a background on either side (So this background should
not appear in the 800x640 window). If that isn't clear compare
http://www.gamespot.com.
Right so my idea was just to put the SWF in a div and this
background PNG in a div and center them both, while making the PNG
width=100%.
Well that doesn't seem to work. I guess you can't center two
divs over each other?? The only way I can make one overlay on the
other is by giving it an absolute position, but then of course it
isn't centered any more.
Any suggestions?

Well, no, that's not what I meant.
Background images don't do 100%. Using CSS like this -
body { background-repeat:no-repeat;
background-position:center; }
will a) prevent the image from tiling, and b) will place it
in the center of
any size viewport. Is that what you wanted?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Joniba" <[email protected]> wrote in
message
news:en3a6r$jgr$[email protected]..
> Yeah, sorry I'm just learning all this, so now I know
how to (I didn't
> when I
> posted the message). So I guess I could just center the
background image
> with
> no-repeat, and if it's 100% it anyway shouldn't repeat
(?). Is that what
> you
> meant?
>

- How to vertically center a div?

How to vertically center a div? :-S

Cannot, really.
Read this -
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Reese" <[email protected]> wrote in message
news:eh34gg$rvh$[email protected]..
> How to vertically center a div? :-S
>

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

Trying to download iTunes on Windows Vista, get system administrator won't allow this kind of installation error. How do I get around that?

I'm trying to download iTunes on Windows Vista, get system adminstrator won't allow this kind of installation error. What should I do? It's 64-bit.

Try the following user tip:
"The administrator has set policies to prevent this installation" error messages when installing iTunes for Windows on Windows Vista and Windows 7 systems

HT4407 Hey, I am unable to install windows 7 using 'bootcamp 5.0' . I have already partitioned the drive as (mac Os Extended Journaled) and yet it seems bootcamp won't acknowledge this?

Hey, I am unable to install windows 7 using 'bootcamp 5.0' . I have already partitioned the drive as (mac Os Extended Journaled) and yet it seems bootcamp won't acknowledge this?
My first thoughts were that 'bootcamp' was out of date...needed an upgrade to register windows 7. Since then I am once again met with the same problem... how can it not see the I have already have a paritioned drived ready to be used for installition, is there a way to fix this problem? I don't really want to pay out for 'i-parition' only to merge my 2 drives back into one and start again from scratch =/. Seems silly to do so...what are my options?
Regards Swishi...p.s If anyone can help me...it'll make my day :3.

ONE PARTITION.
You don't need to buy anything but you should have backups.
you can delete #2 you created. Then resize to full drive.
There are already
GPT
EFI
Mac
Recovery
and there needs to be Windows which cannot be higher ID
Reading the instructions first and just swallow whatever pride or inidignation. It is a "my way or highwar" setup and utility,.
http://manuals.info.apple.com/en_US/boot_camp_install-setup_10.7.pdf
create a Windows support software (drivers) CD or USB storage media
http://support.apple.com/kb/HT4407
The Boot Camp Assistant can burn Boot Camp software (drivers) to a DVD or copy it to a USB storage device, such as a flash drive or hard drive. These are the only media you can use to install Boot Camp software.
https://support.apple.com/kb/HT4569
Installation Guide Instructions for all features and settings.
Boot Camp 4.0 FAQ Get answers to commonly asked Boot Camp questions.
Windows 7 FAQ Answers to commonly asked Windows 7 questions.
http://www.apple.com/support/bootcamp/

I had my computer repaired, and when I got it back I had to reinstall iTunes. Now iTunes won't authorize this computer because it says we already have 5 devices authorized, but this is the same computer. Does anyone know how I can fix this?

I had my computer repaired, and when I got it back I had to reinstall iTunes. Now iTunes won't authorize this computer because it says we already have 5 devices authorized, but this is the same computer. Does anyone know how I can fix this?

Deauthorizing won't delete anything, and all your purchased content is safe. You will just have to reauthorize any of the other computers that get deauthorized along with your computers old machine id.
To get your purchased content back on that computer, just use iTunes to redownload it (http://support.apple.com/kb/HT2519?viewlocale=en_US&locale=en_US). Of course, music you ripped from CD or got from another source you'll need to copy those files back over.

Got an invitation to be entitled for complete membership but my account won't recognise this

Got an invitation from Adobe entitled for complete membership but my account won't recognise this and it is still the free trial membership. What do I do?

Were you able to successfully accept the invitation? I have checked your account and wasnt able to find any active Creative Cloud Subscription. Please check with the Admin of your Team to get a confirmation.

Why can't I center contents in this div?

I'm trying to center an image and an unordered list inside a div, but the contents are moving down past the boundaries of the div. I added a blue border to the div so you can see what it's doing. Can anyone diagnose this? I've monkeyed with it so much that I've probably done more harm than good.
http://www.keithpurtell.com/kthings/bab/index03.htm

I don't remember what your errors were. Why don't you compare my code to yours?
If you don't already have it, I urge you to download the Web Developer Toolbar for Firefox.
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Among many of its features is the ability to edit CSS code from the browser to see the effect it has on your page. This is a must have tool kit for any web designer (novice to pro).
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

What's wrong with my div tag / site won't center....

Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #9B9E6B;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
          font-family: "Arial Black", Gadget, sans-serif;
          font-size: 20px;
          text-align: center;
          padding: 8px;
Here is the code for the site......
<!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=UTF-8" />
<title>Kiahuna 104</title>
<script type="text/javascript">

</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">

<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>

<table width="1000" bgcolor="000">
<tr>
    <td width="40"> </td>
    <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
    <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>

<table id="content1" table width="1000" height="371">
<tr>
    <td width="34"> </td>
    <td width="897"><p>blah blah blah.</p>
      <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
    <td width="53"> </td>
</tr>
</table>
</body>
</html>

I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #000;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
font-size: 16px;
          font-family: Papyrus, Arial, "Helvetica Bold", serif;
          font-size: 22px;
          text-align: center;
          padding: 8px;
table#imagegallery{
          background-image: url(_images/imageGallery_bckgrnd.png);
          background-repeat: no-repeat;
#imagegallery a img{
    padding: 0px;
    margin: 2px;
    border: 2px solid #000;
#imagegallery a:hover img {
          border: 2px solid #C00;
table#footer{
          background-image: url(_images/footer_bckgrnd.png);
          background-repeat: no-repeat;

Help: Added Transparency Div, now site won't center properly...

Good evening, i'm having some issues here on my bro's adult site i'm in charge of. In the "element div" is the instructions how the give the page a 50% transparency. The "content div" contains all my text/photos. For whatever reason that i cannott diagnos, my page is shifted to the left. the content fits over top of the element div so that the it doesn't dim that text.
In the screenshot provided, the site is so far pushed to left of the background image (1600 pixels) that you can't even see the 4th girl. My entire site is only 1100 px, so in theory, if centered properly, you should see a good amount of both of the end girls. The back bar is blocking out the obvious nudity. The 4th girl is so far out of the frame to the right, you can't even see her. Is my page just too wide. It seems that no matter what, the testers can still see the end of the bacground image on larger tvs used as monitors. So any advice on that would be cool as well.
Thanking you guys in advance for your asssitance.
-most of the relevan css below-
h1, h2, h3 {
          margin: 0;
          padding: 0;
          font-weight: normal;
          color: #FFF;
h1 {
          font-size: 3em;
          text-align: center;
          padding-bottom: 10px;
          font-weight: bold;
h2 {
          font-size: 2.4em;
h3 {
          font-size: 1.6em;
p, ul, ol {
          margin-top: 0;
          line-height: 180%;
ul, ol {
a {
          text-decoration: none;
          color: #4486C7;
#wrapper {
          width: 1100px;
          margin: 0px;
          height: 750px;
          position: fixed;
#element1 {
          position: relative;
          z-index: 1;
          background-color: #000;
          height: 1550px;
          width: 1100px;
          /**50% opacity**/
          background: #000000;
          /**for pre-IE8**/
          filter: alpha(opacity=50);
          /**for IE8 only**/
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
          /**for non-IE browsers**/
          opacity: 0.5;
          border: thin solid #999;
#content {
          z-index: 2;
          position: relative;
          top: -1550px;
          width: 1000px;
          color: #FFF;
          text-align: left;
          margin: 0px auto;

That code makes little sense to me - it's very messy. First, I would set the wrapper div to margin: 0 auto; to center it. Next, the background image would work best in the body tag with a background-position: center top;
And remove the fixed position on the wrapper. And the height. Work with the document flow, not against it.

Please help! IE6 won't display my div tags!

My page looks fine in the other Mac browsers but the divs won't show up in Internet Explorer. Please tell me what I am doing wrong and how to fix it so that my div tags display correctly. Here is my source and CSS 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=UTF-8" />

<title>Untitled Document</title>



<style type="text/css">

</style>
<link href="../navmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="nav"></div>
<div id="buffer">this is a buffer</div>
</div>
</body>
</html>
     margin: 0px;
     padding: 0px;
#wrapper {
     width: 909px;
     background-color: #999;
     margin-right: auto;
     margin-left: auto;
     height: 54px;
     overflow: auto;
#wrapper #logo {
     width: 208px;
     float: left;
     background-color: #33F;
     height: 39px;
#wrapper #nav {
     background-color: #933;
     float: right;
     width: 701px;
     height: 39px;
#wrapper #buffer {
     width: 909px;
     clear: both;
     background-color: #0F6;
     height: 15px;

Because IE 6 is 5+ years old and hasn't been updated in a long while and the only reason it's still kicking in somewhat decent numbers is because some large companys utilized IE-only type features for internal applications and intranets and thus forced Microsoft to conitnue to support it beyond the original end-of-support date. :-)
By the way, potentially you could just give IE 6 a really bare-bones layout - but you'll need to make sure that that's acceptable for the project. Also it's good for your sanity if you stop trying to make the site look exactly the same in every browser. It's much easier to make it look "good enough" and make sure that the content is accessible and the site usable.

Help me center this layout please?

Simple layout, trying to center the content/table in Dreamweaver.
Any help will be highly appreciated
Here's the 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>
<title>clk1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

</style>

</head>
<body style="background-color:#FFFFFF;">

<div id="Table_01">
<div id="CLK-01_">
<img id="CLK_01" src="images/CLK_01.jpg" width="215" height="150" alt="" />
</div>
<div id="CLK-02_">
<img id="CLK_02" src="images/CLK_02.jpg" width="485" height="100" alt="" />
</div>
<div id="CLK-03_">
<img id="CLK_03" src="images/CLK_03.jpg" width="100" height="100" alt="" />
</div>
<div id="CLK-04_">
<img id="CLK_04" src="images/CLK_04.jpg" width="585" height="50" alt="" />
</div>
<div id="CLK-05_">
<img id="CLK_05" src="images/CLK_05.jpg" width="280" height="325" alt="" />
</div>
<div id="CLK-06_">
<img id="CLK_06" src="images/CLK_06.jpg" width="520" height="325" alt="" />
</div>
<div id="CLK-07_">
<img id="CLK_07" src="images/CLK_07.jpg" width="800" height="125" alt="" />
</div>
</div>

</body>
</html>

To give you an idea of my interpretation of your document
<!DOCTYPE html>
<html>
<head>
<title>clk1</title>
<meta charset="iso-8859-1">
<style>
body {width: 800px; height: 600px; margin: auto; background: #FFF;}
#header {height:150px;}
#header #logo {width:215px; height:150px; float:left; background:green;}
#header #heading {width:485px; height:100px; float:left;}
#header #login {width:100px; height:100px; float:right; background:yellow;}
#header #nav {width:585px; height:50px; float:left; background:blue;}
#aside {width:280px; height:325px; float:left; background:gray;}
#article {width:520px; height:325px; float:left; background:lightblue;}
#footer {clear:both; height:125px; background:black;}
</style>
</head>
<body>
<div id="header">
<div id="logo"><img id="CLK_01" src="images/CLK_01.jpg" alt=""></div>
<div id="heading"><img id="CLK_02" src="images/CLK_02.jpg" alt=""></div>
<div id="login"><img id="CLK_03" src="images/CLK_03.jpg" alt=""></div>
<div id="nav"><img id="CLK_04" src="images/CLK_04.jpg" alt=""></div>
</div>
<div id="aside"><img id="CLK_05" src="images/CLK_05.jpg" alt=""></div>
<div id="article"><img id="CLK_06" src="images/CLK_06.jpg" alt=""></div>
<div id="footer"><img id="CLK_07" src="images/CLK_07.jpg" alt=""></div>
</body>
</html>
With that I need to say that there are many more style rules that need to be and can be added for better visual effects.
Also, you will probably want to replace some of the images with text and images. You may want to place images as background images that are decorative and do not add to the content. This can be done where I have placed a background colour.
You may also want to add a CSS reset so that you create a common foundation for all browsers, see here http://meyerweb.com/eric/tools/css/reset/
Note that I have named the divs using HTML5 elements, see here http://www.alistapart.com/articles/previewofhtml5
Lastly, as you can see, there is no easy way, but there is a right way and a wrong way. Using Illustrator the way you have is the wrong way.
Cheers,
Gramps
PS Have a look here if you are brave enough http://html5boilerplate.com/ . If you are intimidated by this just forget it

Table won't center in Firefox

This is a new post in regards to a previous problem. I have
made some changes, but have been unable to find a complete solution
yet. Maybe someone can help.
I originally created a template using tables, and have since
redesigned it using CSS for most of my layout (in attempts to speed
up the loading time.) My main problem is in how Firefox (I haven't
checked this page with a Mac yet either) reads the page. It tries
to put the content left aligned (this was not reflected in the
document after I made my first post about this issue becasue I
tried to make some adjustments unsuccessfully). Here's the main
issue:
I have tried to place a table to hold the editable region of
my template in the <div> named #maincontent. Here's what
#maincontent looks like:
#maincontent {
background-image:
url(images/background/adoption-bkgd-mid-3.gif);
background-repeat: repeat-y;
background-position: center;
position: absolute;
width: 100%;
top: 305px;
text-align: center;
visibility: visible;
I want this table to appear centered in all browsers. How can
I acheive that?
If you look at the site in IE7 everything looks fine, but in
Firefox the table is left aligned (now that it has been changed
back).
Here's the site:
www.robertandsharon.com
Thanks again,
Sharon

Don't you also need to add a CSS width? Seems like I always
need to do
that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Give the table in the 'maincontent' <div> an 'id'
named 'mainTable' see
> code below.
>
>
> <div id="maincontent">
> <table border="0" id="mainTable" cellpadding="0"
cellspacing="0"
> width="800">
>
> Then add this css to your css style sheet.
>
> #mainTable {
> margin-left: auto;
> margin-right: auto;
> }
>
>
>
>
>
>
>
>
>
>
>
> sharonw wrote:
>> This is a new post in regards to a previous problem.
I have made some
>> changes, but have been unable to find a complete
solution yet. Maybe
>> someone can help.
>>
>> I originally created a template using tables, and
have since redesigned
>> it using CSS for most of my layout (in attempts to
speed up the loading
>> time.) My main problem is in how Firefox (I haven't
checked this page
>> with a Mac yet either) reads the page. It tries to
put the content left
>> aligned (this was not reflected in the document
after I made my first
>> post about this issue becasue I tried to make some
adjustments
>> unsuccessfully). Here's the main issue:
>>
>> I have tried to place a table to hold the editable
region of my template
>> in the <div> named #maincontent. Here's what
#maincontent looks like:
>>
>> #maincontent {
>> background-image:
url(images/background/adoption-bkgd-mid-3.gif);
>> background-repeat: repeat-y;
>> background-position: center;
>> position: absolute;
>> width: 100%;
>> top: 305px;
>> text-align: center;
>> visibility: visible;
>> }
>>
>> I want this table to appear centered in all
browsers. How can I acheive
>> that?
>>
>> If you look at the site in IE7 everything looks
fine, but in Firefox the
>> table is left aligned (now that it has been changed
back).
>>
>> Here's the site: Thanks again,
>> Sharon
http://www.robertandsharon.com
>>
>

Images won't center

I created my site in DW MX, and I've been previewing it within the program. My problem is that when I click on my thumbnail images to see if they're linked correctly, I pull up the main image, but it's aligned to the left instead of the center. All my thumbnails are this way - not just one. I open the HTML page and have verified that the images are centered there fine and saved. I have no idea why my images aren't centering (unless they're in a table).
Has someone else had this problem?

It would be better if you posted a link to your test page so we can see what you're trying to describe. Answers are found in the CSS and HTML code.
Generally speaking, to center a web page you need three things.
1. A valid document type,
2. A width in pixels or percentages,
3. margin-left and margin-right set to auto.
CSS code:
#wrapper {
width: 600px; /**adjust width as required**/
margin: 0 auto; /**centers in modern browsers**/
text-align: center; /**centers in older browsers**/
HTML code:
<div id="wrapper">
your content goes here
</div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

IE 6 & 7 Won't Center this Div...

Similar Messages

Maybe you are looking for