preview works IE7 not Mozilla / Opera 2

This is a discussion on "preview works IE7 not Mozilla / Opera 2" within the Web Page Design section. This forum, and the thread "preview works IE7 not Mozilla / Opera 2 are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Sep 11th, 2007, 18:48
New Member
Join Date: Sep 2007
Location: South Africa
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Red face preview works IE7 not Mozilla / Opera 2

Hi, I used dreamweaver for a basic template (1 column liquid, centered, header & footer) So i could just change some of the properties as I'm not all that 'CSS clued-up'
my attached style sheet reads (I left the comments)
Code: Select all
@charset "utf-8";
body {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
}
.oneColLiqCtrHdr #container {
    width: 80%;  /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
    padding: 0 10px 1px 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    color: #CCCCCC;
    background-color: #3C3C3C;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.oneColLiqCtrHdr #nav {
    padding: 0 10px 1px 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    color: #CCCCCC;
    background-color: #515151;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.oneColLiqCtrHdr #pic {
    padding: 83px 10px 1px 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    color: #CCCCCC;
    background-color: #515151;
    background-image: url(header.jpg);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.oneColLiqCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
}
.oneColLiqCtrHdr #footer { 
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
} 
.oneColLiqCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
The preview is great in IE7 (apart from the spry sub-menu positions)
Not so good in Mozilla / Opera
I have white space above my #header div and the spry menu (#nav div) sits on the #pic div

Sry I'm dumb
It's for a primary school so be merciful I'm not charging them.

Last edited by karinne; Sep 13th, 2007 at 18:26. Reason: Please use the vBcode [ code ] when inserting code in your post.
Reply With Quote

  #2 (permalink)  
Old Sep 12th, 2007, 11:31
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: preview works IE7 not Mozilla / Opera 2

Do you have a link to the site? If not, can you include the html?
Reply With Quote
  #3 (permalink)  
Old Sep 13th, 2007, 17:56
Marc's Avatar
Moderator

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Age: 15
Posts: 1,661
Thanks: 0
Thanked 9 Times in 9 Posts
Re: preview works IE7 not Mozilla / Opera 2

Yes, as Linda says, we cannot help you if you only show us half of the code.
Reply With Quote
Reply

Tags
browser compatibility, css

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Very wrong in IE7. Spot on in Mozilla & Opera. [SOLVED] Itsumishi Starting Out 15 Feb 17th, 2008 21:51
Preview problem... computerad JavaScript Forum 0 Sep 7th, 2007 14:37
Font Preview Lchad JavaScript Forum 13 Dec 13th, 2006 14:06
Can C it in DW preview but not in IE csa Web Page Design 4 Feb 19th, 2006 22:14
script runs on IE but not correctly on Opera,Mozilla ranjan JavaScript Forum 1 Jun 20th, 2005 20:44


All times are GMT. The time now is 13:30.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43