Jump to content


Need help


14 replies to this topic

#1 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 30 August 2007 - 09:00 PM

Hello I have been making a template or site, but the menue or navigation done't look right it IE. Its perfect in FF. I think it has to do with the type of navigation I am using you will see in the code, but I don't really know. Does anyone know why it does this? I don't really know how to describe the problem but I think I read that somewhere you arn't able to make navigation that has auto size for Ie, but I bassically got the basic code for the navigation from hear. http://www.cssplay.c...s/centered.html menu 2

Hears what it does...

FF http://i93.photobuck...y_Bouzy/ada.jpg

IE http://i93.photobuck..._Bouzy/adaa.jpg

I always have problems with my sites in IE (But they always look perfect the first time in FF. Is this because of some bad coding habits or what???

Also at the bottom of the IE one the footer spaceing and stuff is a bit messed up even though its great in IE.

#menu {
   
   padding: 0px;
   margin: auto; 
   white-space: nowrap;
   background-image: url(Images/navigation.jpg);
   margin-left: 4px;
   background-repeat: no-repeat;
   height: 32;
   width: 742;
   list-style-type:none;
   margin-bottom: 4px;
 
 }
 
 #menu li {
   
   display:table-cell;
   
 }
 
 
 #menu a {
   
   width: auto;
   display:block;
   padding:5px 17px;
   color:#7699b5; 
   background:#b0cfe1; 
   text-decoration:none;
   
 }
 
 
 #menu a:hover {
   
   color:#b0cfe1; 
   background:#7699b5;
  
 }
 
 .container {text-decoration:none;}
 * html .container {display:inline-block;}

<ul id="menu">
 <li><a href="#nogo">Home</a></li>
 <li><a href="#nogo">Blog</a></li>
 <li><a href="#nogo">Portfolio</a></li>
 <li><a href="#nogo">About</a></li>
 <li><a href="#nogo">Contact</a></li>
 </ul>

That is in an include file from the main xhtml like this

 <div id="header">
	 <!-- HEADER CODE -->
	 <img src="Images/header.jpg" alt= "Banner and title of site" />
 
   </div>
 
 <!-- ************************ -->
 
	 <!-- NAVIGATION CODE -->
	 <!-- CSS NAVIGATION -->
 
 <del class="container">
 <?php
 @include('Includes/links.html');
 ?>
 </del>
 
 <!-- ************************ -->
 
	   <div id="conttop">
		 <!-- PUT MAIN COLUMN_T CODE HERE -->
 
	   </div>
 
 <!-- ************************ -->
 
	   <div id="content">
		 <!-- PUT MAIN COLUMN CODE HERE -->
		 <!-- PUT YOUR MAIN HEADING FOR THE PAGE AND CONTENT BETWEEN THE HEADING TAGS <H> AND THE PARAGRAPH TAGES <P> -->
		 <h2 class="contentheading">Heading</h2>
		 <p class="contentparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu enim quis odio blandit malesuada. Vivamus tristique, felis eu tristique tincidunt, ipsum libero tempor lectus, sed feugiat lectus urna non risus. Suspendisse ac elit. Nam nec erat. Nulla posuere nisi at magna venenatis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare, felis malesuada fermentum sagittis, justo nibh interdum tortor, sed ullamcorper purus dui at pede. Maecenas suscipit justo non ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pede. Fusce lobortis euismod diam. Morbi ullamcorper laoreet nibh. Mauris elementum, dui ut facilisis pretium, urna dolor rhoncus mi, ut tempor metus neque sed justo. Nulla vel tellus in nisl ultrices suscipit. Ut nisl. Quisque turpis libero, fermentum sed, nonummy non, eleifend eu, ipsum. Ut sit amet nunc. Mauris a neque sit amet purus volutpat cursus. Quisque sem.
 
 Suspendisse sed risus eget odio imperdiet tristique. Sed urna neque, facilisis ut, pulvinar sit amet, hendrerit id, urna. Morbi congue diam id eros. Phasellus sit amet lorem. Mauris sollicitudin. Cras gravida, lectus quis dictum auctor, elit tortor semper libero, viverra tincidunt justo ligula venenatis ipsum. Integer eget libero. Aliquam dapibus sem nec ipsum. Vestibulum augue. Phasellus a nisl semper urna venenatis tristique. Quisque eu purus. Nunc eu sapien sodales neque fermentum blandit. Donec molestie libero et metus egestas dictum. Praesent magna lorem, faucibus sit amet, semper sit amet, porta a, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec justo. Proin ultricies interdum erat. Pellentesque nec nunc. In volutpat lacus ac mauris. Nulla mauris neque, mollis a, faucibus vitae, posuere et, lacus.</p>
 
	   </div>
 
 <!-- ************************ -->
 
	   <div id="contentb">
		 <!-- PUT MAIN COLUMN_B CODE HERE -->
 
	   </div>
 
 <!-- ************************ -->
	 
   <div id="footer">
	 <!-- PUT FOOTER CODE HERE -->
	 <p id="copy">&copy; 
		  <?php ini_set('date.timezone', 'American/Eastcoast');
		  $startYear = 2007;
		  $thisYear = date('Y');
		  if ($startYear == $thisYear) {
		  echo $startYear;
		  }
		  else {
		  echo "{$startYear}-{$thisYear}";
		  }
		  ?>
	 Goldfish Graphics</p>
	
   </div>
 
 <!-- Closing container div -->
 </div>

If anyone could help that would be great seeing as this is for someone. (P.S. everything validats I think)

Edited by Bouzy210, 30 August 2007 - 09:03 PM.


#2 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 30 August 2007 - 09:07 PM

Im pretty sure this will fix your problems in ie with the nav, what you want to do is use a hack to display on thing in ff and one in ie so:

#menu li{
	 display:inline{	(this is for ie)
}
html>body #menu li{
	 display:table-cell{  (for all others)
}

this is to me what the problem looks like but i cant be sure.

Edited by Lastcrime, 30 August 2007 - 09:09 PM.


#3 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 30 August 2007 - 09:12 PM

for the footer you have to use the same hack and change the margins around because ie messes up the margins, eg. 10px in ff is only 5px in ie or something like that. I cant help you more because you didn't show the css for the footer.

#4 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 30 August 2007 - 09:27 PM

First off I thought I took care of the Ie and FF margin problems when I put this in my body css...

/* Main CSS of the A site coded by s in the month of Aug. 2007*/
 
 body {
 
   /*This takes care of cross browser problems by making no defualt margin or padding*/
   margin:0;
   padding:0;

Second hear is the footer css

#footer {
 
   background-image: url(Images/footer.jpg);
   margin-left: 4px;
   background-repeat: no-repeat;
   width: 742px;
   height: 30px;  
   padding-bottom: 4px;
   color: #ffffff;
 
 }

Thirdly everyone always says use hacks and stuff, but I don't get how or whatever do I just put #menu li{
display:inline{ (this is for ie)
}

in there or do I have to do other stuff?

Thanks for any advice given lastcrim and anyone else who helps.

Edited by Bouzy210, 30 August 2007 - 09:27 PM.


#5 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 30 August 2007 - 09:52 PM

ok as far as i know the margin:0 and padding:0 do not take care of IE problems, this looks as if it does nothing (but i could be wrong).

NAV PROBLEMS:

okay this is the exact code you want:

#menu li{
	 display:inline;
}
html>body #menu li;
	 display:table-cell
}

The hack part is the html>body, IE is unable to notice the parent child part being html>body, so anything you put here ie wont see. And for all the other browsers it will overide the first display:inline, with display:table-cell.

FOOTER PROBLEMS:

same goes here use the parent>child hack, your problem here is padding bottom, this is the code you want to put:

#footer {

   background-image: url(Images/footer.jpg);
   margin-left: 4px;
   background-repeat: no-repeat;
   width: 742px;
   height: 30px;
   padding-top:4px;  
   padding-bottom: 4px;
   color: #ffffff;

}
html>body #footer {

   background-image: url(Images/footer.jpg);
   margin-left: 4px;
   background-repeat: no-repeat;
   width: 742px;
   height: 30px; 
   padding-top:0px; 
   padding-bottom: 4px;
   color: #ffffff;

}

Notice that i changed the code and added a padding top, in the code that IE SEES, i put padding-top:4px; (adjust this too your needs) and in the FF one i had to add padding-top:0px; or else it would use the 4px from the first statement and throw stuff off. This should fix your problems with the footer in ie, you might have to play with it a bit, by changing the px or doing something like margin-top:4px; im not sure.

Edited by Lastcrime, 30 August 2007 - 09:54 PM.


#6 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 30 August 2007 - 10:33 PM

Wow learn all this from tutorials or what? Thanks a million. You deserve the I help people with their prolbmes award.

#7 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 30 August 2007 - 10:50 PM

lol some from tutorials and some from this css hacks and filters book REALLY GOOD INFO.

#8 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 31 August 2007 - 04:33 PM

Ok so I have fixed most of it with your advice and a little bit of messing and hear is what I have.

http://i93.photobucket.com/albums/l75/Bouz...sssssssssss.jpg

All the margin problems are fixed, but the navigation still isn't working right. Hear is the code, and I think I did what it said above but I might be wrong. Any ideas? Hear is the new code I have, but the FF still looks like it did in the origonal one at top.

#menu {
  
  padding: 0px;
  margin: auto; 
  white-space: nowrap;
  background-image: url(Images/navigation.jpg);
  margin-left: 4px;
  margin-right: 4px;
  background-repeat: no-repeat;
  height: 32;
  width: 742;
  list-style-type:none;
  margin-bottom: 4px;

}

html> #menu li{
  
  display:inline;
  
}

#menu li {
  
  display:table-cell;
  
}

#menu a {
  
  width: auto;
  display:block;
  padding: 5px 17px;
  color:#7699b5; 
  background:#b0cfe1; 
  text-decoration:none;
  
}


#menu a:hover {
  
  color:#b0cfe1; 
  background:#7699b5;
 
}

.container {text-decoration:none;}
* html .container {display:inline-block;}


#9 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 31 August 2007 - 06:43 PM

you messed up the code, i gues i didn't explain it well enough sry. Ill try again. IE can not see anything with this infront html>body This is the parent>child hack. The hack has to over the code you dont want IE to see and the code you want FF and other browsers to see. So you have to put it after you put the code you want IE to see.

This is what you have:

[quote]html> #menu li{
  
  display:inline;
  
}

#menu li {
  
  display:table-cell;
  
}
[/quote]

This is what it should be:

#menu li{
	  display:inline;	  /*This is the code that IE can see, but the other browsers overide*/
}

html>body #menu li{
	  display:table-cell;	 /*This is the code that IE can not see and FF and other browsers can see*/
}

Edited by Lastcrime, 31 August 2007 - 06:44 PM.


#10 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 31 August 2007 - 10:31 PM

I did that but still same problem. At least you are trying to help though all I got on other forums was that my code was messy (I thought it was neat, but I might be wrong)

#11 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 31 August 2007 - 11:42 PM

I have it all fixed now exept for the copyright in the footer. It isn't the same in ff as IE. Is there a sugggested hack I use for this? i tried the same kind of thing but it didn't work. hear is what I have.

#copy {

/*This is the code that IE can see, but the other browsers overide*/
color: #b0cfe1;
margin: 4px;
padding: 4px;



}

html>body #copy{

color: #b0cfe1;
text-align: center;
margin: 4px; /*Display table-cellThis is the code that IE can not see and FF and other browsers can see*/
padding-top: 6px;
}


doesn't work.

#12 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 31 August 2007 - 11:50 PM

im not sure id have to see an example.

#13 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 01 September 2007 - 08:54 PM

Its just text positioning, so I have text in a class or id and it needs to be positioned, but it looks differnt in IE then FF. I think I would use the same thing, but it affects both browsers when I use the hack.

#14 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 01 September 2007 - 09:34 PM

show me how you used the hack.

#15 Bouzy210

    Jedi In Training

  • Members
  • PipPip
  • 434 posts
  • Gender:Male

Posted 01 September 2007 - 09:56 PM

.copy {

/*This is the code that IE can see, but the other browsers overide*/
color: #b0cfe1;
margin: 4px;
padding-top: -5px;

}

html>body .copy {

color: #b0cfe1;
text-align: center;
margin: 4px; /*Display table-cellThis is the code that IE can not see and FF and other browsers can see*/
padding-top: 6px;
}





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users