Quantcast

Maximum PC
It is currently Wed May 22, 2013 9:34 am

View unanswered posts | View active topics


Board index » OS/Software/Programming » Programmers' Paradise

All times are UTC - 8 hours




Post new topic Reply to topic  Page 1 of 1
  [ 2 posts ] 
  Print view Previous topic | Next topic 
Author Message
mag
 Post subject: webpage incompatible with ie
PostPosted: Tue Jan 27, 2009 9:00 pm 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1022
I'm webpage, and have the layout working in firefox and google chrome, but not in ie 7, so I was wondering if anyone could help me?

__________________
|.........image................|
|_________________|
|part 1|part 2|part 3..| <- middle section
|_____|____ |______|
|bottom section..........|
|_________________|

In ie, the 3 parts of the middle section appear stacked on top of each other, instead of next to each other, like they do in firefox and chrome.

Also, does anyone know how I can get rid of table-type display styles; it seems like just using inlines should work, but they don't.

html page
Code:
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>

<div style="width: 1024px; margin: 0 auto; padding: 0px;">
   <a href="index.php?p=Link"><img style="border: none; width: 1024px; height:175px;background-color: #FFFF00;" src="header.jpg" /></a>
<div style="display: table; height: 100%; width: 100%;">
<div style="display: table-row; height: 100%; width: 100%;">
   <div style="display: table-cell; width: 50px; height; 100%; background-color: #FF00FF">&nbsp;</div>
   <div style="display: table-cell; width: 150px; margin: 0px; padding: 0px; border: none; background-color: #000000;">
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
      <a href="index.php?p=Link"><div class="nav_button">Link</div></a>
   </div>

   <div style="display: table-cell; width: 824px; margin: 0px; padding: 0px; border: none; background-color: #00FFFF">
      <b>Welcome</b>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <b>Hello!</b>
   </div>
</div>
</div>

   <div style="width: 100%; border: none; background-color:#000000; color:#FFFF00; padding: 10px 5px;">
      <a href="index.php?p=P_Site_Map" style="color:#FFFF00">Site Map</a> | <a href="index.php?p=P_Security_Notice" style="color:#FFFF00">Security Notice</a> | <a href="index.php?p=P_FOIA" style="color:#FFFF00">FOIA</a> | <a href="index.php?p=P_Disclaimer" style="color:#FFFF00">Disclaimer</a></td> <!-- This is the footer for the legal stuff -->
   </div>
</div>

</body>
</html>


css page
Code:
.nav_button{
   border: thin solid #000000;
   display: block;
   width: 150px;
   background-color: red;
   color: #FFFF00;
}

.content_title{
   text-align: center;
   font-family: purisa;
}

.content_text{
   padding: 0px 40px;
}
[/code]
Top
  Profile  
 
mag
 Post subject:
PostPosted: Fri Jan 30, 2009 11:55 pm 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1022
I messed around with it a little today and was able to figure it out.

The key was to use float.

Since part 1 is just blank space, I took that out and added a margin on the left side of part 2.
Then set the display type of part 2 and part 3 to inline or block (doesn't seem to matter).
Then I added "float: left" to part 2 and "float: right" to part 3.
Finally I added "float: left" to the bottom section, so it would display in the correct location.

The only thing is that part 2 was a menu, and the background doesn't extend past it now, but I think I like it better not extending down the page.
Top
  Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 2 posts ] 

Board index » OS/Software/Programming » Programmers' Paradise

All times are UTC - 8 hours


Who is online

Users browsing this forum: No registered users and 2 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group