Solved

problems with div's for IE and Firefox

Posted on 2007-11-30
3
2,409 Views
Last Modified: 2013-12-08
here is my issue...I am created a new web site that has a header 'graphic', then a menu 'row' (horizontal menu), then a main content area, then a footer area. Each of these 'areas' (divs) has a background image associated with them. I have been 'fairly' successful in get this all to be 'centered' in my browser by using the       margin: 0 auto; setting in my stylesheet.  Then I went on to the content...the Content I was setup as two 'columns' so I setup a table to set on top of the content 'image' and setup margin-top, margin-right, values for the 'content' div which is where the table is sitting...Then I wanted to add some 'graphics' to the right column of the table and have 'divs' setting 'on top' of those graphics...I created another table to sit inside of the right column and have this secondar table have 3 rows...each row holding a 'graphic'.  This was working in IE but when I went to view it in Firefox, Firefox was having problems with the secondary table graphic being in the right place, and the text (which was defined in a div) not appearing over the graphics...I know this is all 'text' and I don't have a website to show you and there is no way for me to 'copy/paste' a screen show of what I am seeing in Firefox...Any suggestions.
0
Comment
Question by:cenetadmin
  • 2
3 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20391547
Other than not using tables for layout, I can't offer much advice without seeing any code.

Could you paste some of your html and css?
0
 

Accepted Solution

by:
cenetadmin earned 0 total points
ID: 20430555
What I want to do is within the 'content' area div I want to place other 'divs' within it that will appear 'on top' of it and then those will be layout almost 'absolute' or at least where I can put them to look like they are in columns...(that is why I used a table)...I am sure it is something simple but I couldn't ever get the divs to appear that way, they would also show up above or below...I took them out for now and just sent you a plain masterpage and the stylesheet...
Thanks
JC
Here is some of my stylesheet.
BODY
{
      /*SCROLLBAR-FACE-COLOR:#BED3CA; this was working...*/
      background-color: #648397;
      text-align:left; /*center*/
      text-align:center;
      margin-left:0px;
      margin-top:0px;
}

.Header {
      background-image: url(../images/header.jpg);
      background-repeat: no-repeat;
      background-position: left; /*center*/
      background-position:center;
      height: 61px;
      top: 1px;
}


.NavBar {
      background-image: url(../images/navbar.jpg);
      background-repeat: no-repeat;
      height: 36px;
      margin: 0 auto;
      text-align: left;
      width: 720px;
      margin-top: 5px;
}
.NavBarHolder
{
      width:713px;
      margin-top: 2px;
}
.ContentBackground1
{
      /* this is the silver background...*/
      background-image: url(../images/content1.jpg);
      background-repeat: no-repeat;
      height: 612px;
      margin: 0 auto;
      text-align: left;
      border: 2px solid #648397;
      width: 720px;
}
.Content
{
      /* what the content displays in, overlays the contentbackground1 */
      margin-top: 1px; /* was 5px */
      margin-right: 18px;
      margin-bottom: 5px;
      margin-left: 17px;
      /*background-color:Aqua; */
      /*border: 2px solid #000; */

      z-index: 1;
}
.Footer {
      background-image: url(../images/footer.jpg);
      background-repeat: no-repeat;
      height: 36px;
      margin: 0 auto;
      text-align: left;
      width: 720px;
      border: 2px solid #648397;
}

.FooterCopyright
{
      font-family: "Trebuchet MS";
      font-size: 14px;
      margin-top: 7px;
      margin-right: 18px;
      margin-bottom: 7px;
      margin-left: 18px;
      /*border: 2px solid #000; */
}



Here is my 'master page'
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Cultural Exchange Network</title>
            <link rel="stylesheet" type="text/css" href="Common/Default1.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="Header" id="Header"></div>
        <div class="NavBar" id="NavBar" >
  <div class="NavBarHolder" id="NavBarHolder">
   
 
 
  </div>
</div>
<div class="ContentBackground1" id="ContentBackground1">
      <div class="Content" id="Content">
      
          <div>
        <asp:contentplaceholder id="MainContent" runat="server">
        </asp:contentplaceholder>
    </div>
      
      </div>
</div>
<div class="Footer" id="Footer">
  <div class="FooterCopyright" id="FooterCopyright">
      <asp:Label  CssClass="Copyright" ID="Label1" runat="server" Text="Label">© 2008 CENET</asp:Label></div>
</div>

    </form>
</body>
</html>
0
 

Author Comment

by:cenetadmin
ID: 20449325
any suggestions from this code?
0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question