Thu, 2005-10-27 18:55
hi i got some great help here a couple of days ago so basically im back for some more ':)'
i have the folowing css file
#container{
position:relative;
}
#masthead{ /*holds logo cell and btnholder*/
position: relative;
width: 100%;
min-width: 640px;
height: 141px;
color: #000000;
padding: 0px;
margin: 0px;
float:left;
left:5%;
}
#logobg{ /*the grey background behind the logo*/
position: absolute;
top: 0px;
height: 141px;
min-width: 167px;
padding: 0px;
margin: 0px;
left: 0px;
z-index: 100;
float:left;
background-color:#F4F4F4;
}
#logocell{ /*holds buttons*/
position: absolute;
top: 0px;
height: 141px;
min-width: 172px;
padding: 0px;
margin: 0px;
left: 0px;
z-index: 100;
float:left;
background-color:#CCCCCC;
background:url(./logo.gif) no-repeat center;
}
#btnholder{ /*holds buttons*/
position: absolute;
top: 0px;
height: 141px;
min-width: 640px;
padding: 0px;
margin-left: 177px;
z-index: 100;
float:left;
}
/******************************************************/
/*******LINK IMAGE CREATION INCLUDING ROLLOVERS********/
/******************************************************/
a.leftbtnlink, a.leftbtnlink:visited{
font-size: small;
color:#A1B2C2;
font-weight: bold;
margin: 0px;
border-right: 0px solid #8FB8BC;
background:url(./lbtn.gif) no-repeat;
width:101px;
height: 141px;
display:block;
float:left;
text-decoration:none;
}
a.leftbtnlink:hover{
color:#FFFFFF;
background:url(./lbtnover.gif) no-repeat;
text-decoration: none;
height: 141px;
display:block;
float:left;
text-decoration:underline;
}
a.btnlink, a.btnlink:visited{
font-size: small;
color:#A1B2C2;
font-weight: bold;
margin: 0px;
border-right: 0px solid #8FB8BC;
background:url(./btn.gif) no-repeat;
width:101px;
height: 141px;
display:block;
float:left;
margin-left:5px;
text-decoration:none;
}
a.btnlink:hover{
color:#FFFFFF;
background:url(./btnover.gif) no-repeat;
text-decoration: none;
height: 141px;
display:block;
float:left;
text-decoration:underline;
}
a.rightbtnlink, a.rightbtnlink:visited{
font-size: small;
color:#A1B2C2;
font-weight: bold;
margin: 0px;
border-right: 0px solid #8FB8BC;
background:url(./rbtn.gif) no-repeat;
width:101px;
height: 141px;
display:block;
float:left;
margin-left:5px;
text-decoration:none;
}
a.rightbtnlink:hover{
color:#FFFFFF;
background:url(./rbtnover.gif) no-repeat;
text-decoration: none;
height: 141px;
display:block;
float:left;
text-decoration:underline;
}
#linktext{
margin-top:30px;
}
and the following html file:
<html> <head> <title>CSS TEST</title> <link rel="stylesheet" href="css.css" type="text/css" /> </head> <body > <div id="container"> <div id="masthead"> <div id="logobg"> <div id="logocell"></div> </div><!--end logobg--> <div id="btnholder"> <a href="#" class="leftbtnlink" ><div id="linktext">Link 1</div></a> <a href="#" class="btnlink " ><div id="linktext">Link 2</div></a> <a href="#" class="btnlink" ><div id="linktext">Link 3</div></a> <a href="#" class="btnlink" ><div id="linktext">Link 4</div></a> <a href="#" class="btnlink" ><div id="linktext">Link 5</div></a> <a href="#" class="btnlink" ><div id="linktext">Link 6</div></a> <a href="#" class="rightbtnlink" ><div id="linktext">Link 7 <BR> this is a link</div></a> </div><!--end btnholder--> </div><!--end masthead--> </div> <!--end container--> </body> </html>
as i said last time i was here im REALLY new to this and cant figure out why this works fine in firefox and not at all in IE - can anyone help?
thanks
mm
Thu, 2005-10-27 19:03
#1
Layout is fine in firefox but not in explorer
Could you describe what IE is doing exactly? Or provide a link to your work page so we can see how it goes with all the images in?
->Day<-
Thu, 2005-10-27 19:03
#2
Layout is fine in firefox but not in explorer
sorry forgot to say you can check it out here
Thu, 2005-10-27 19:07
#3
Layout is fine in firefox but not in explorer
I blame no DOCTYPE. See the link in my sig and getcherself one. That might help IE out. I'm not very expert at all the vast and many things that are wrong with IE, but sort that out and see what it does. If nothing else, making sure browsers are in standards mode (rather than quirks) helps show where the problems really are.
Also, you'll want a character encoding.
->Day<-
Thu, 2005-10-27 20:12
#4
Layout is fine in firefox but not in explorer
I checked out your link and the code. I noticed that you have pasted all the Doctypes into your code. Only one is needed...more than one will probably throw the browsers into quirksmode just as if you didn't have any.
You probably want to use this one. 
- r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Thu, 2005-10-27 20:17
#5
Layout is fine in firefox but not in explorer
cheers for the reply but i tried that and it didnt work
i put in some character encoding and i tried all of the different doc types you suggested and still nothing... i did put them in one at a time to see which one would work and as a last ditch type of thing i out them all in...
Thu, 2005-10-27 20:36
#6
Layout is fine in firefox but not in explorer
one issue that I see is that you are using the 'linktext' ID multiple times. An ID can only be used once per page, where as a CLASS can be used multiple times.
I ran your code through the validator http://validator.w3.org and it came up with several errors. One or all of the errors is most likely causing IE to mess up your page.
There are better ways to create rollovers that will cause less stress for you when it comes to IE. I would suggest doing a Google search on 'CSS Image Replacement' and 'CSS horizontal menus'
Here is a site that I use often:
http://www.alistapart.com
- r
Thu, 2005-10-27 21:05
#7
Layout is fine in firefox but not in explorer
thanks for that, i'll have a look at all of that and check back soon
Thu, 2005-10-27 21:54
#8
Layout is fine in firefox but not in explorer
The DTD does nothing to fix a page. What it does is put all browsers on a closer to equal footing. IE, especially, follows even fewer rules correctly when the DTD is transitional or incomplete. So use a complete, strict DTD.
The DTD also tells the validator which set of rules to use when checking your code. By using a strict DTD, any use of deprecated tags or attributes will raise a flag.
Unless you are familiar with html compatibility mode for xhtml, stick with html4.01 strict. You could configure Tidy to output xhtml, and it would fix the syntax stuff for you if you want to go with the xhtml DTD.
cheers,
gary
Thu, 2005-10-27 22:10
#9
Layout is fine in firefox but not in explorer
I meant to mention that {position: absolute||fixed;} and {float: ↔;} are mutually exclusive. The float loses the tug of war.
cheers,
gary
Sat, 2005-10-29 20:17
#10
phew
ok i think i might have cracked it, for a while there i nearly considered going back to tables (':shock:')
could someone check out
http://www.student.livjm.ac.uk/engjbarn/
and see what they think - i have put all of the css in the same file so you can see it from the source - are there any things that could be done better?
also i have put everything into a masthead element to try and center the content on the page but it wont let me do it - is this something to do with the float:left on the logo and btnlist elements?
i have two more elements to add, one the same width as the logo and another the same width as the navigation. Both of these will go underneath what is already there - is the best way to align everything just to copy what i have already done and change the contents of the elements?
thanks in advance for your help
Sat, 2005-10-29 20:38
#11
Layout is fine in firefox but not in explorer
Go fix your errors. A link (a) can't contain a div. An id can only be used once per document.
cheers,
gary
Sat, 2005-10-29 22:08
#12
Layout is fine in firefox but not in explorer
cheers for the reply, ive fixed all of the errors (locally before you check) what would you suggest i use to label the link text so i can display the text about a third of the way down the grey boxes?
all i can get it to do at the minute is move everything down, not just the text!!
thanks again gary
Sun, 2005-10-30 00:21
#13
Layout is fine in firefox but not in explorer
You can still put h5s inside your <li>s, but the <a> has to go inside the <h5>, not outside it.
Also, are you checking your design in FF cos one of your links is out of whack (and I can't figure out why cos it doesn't seem to be styled any differently from the others).
Sun, 2005-10-30 22:13
#14
Layout is fine in firefox but not in explorer
hi tyssen,
ive tried putting the H5 outside the <a> but all that does is move everything down - all i want to do is move the text down and leave the grey link boxes where they are.
Which link did u say isn't right cos it all looks fine in my FF?
Sun, 2005-10-30 22:23
#15
Layout is fine in firefox but not in explorer
If you must use an image to make the solid color, then investigate some of the various ways of making them pre-load with CSS. I can't find any links on this just now, but I'm sure Google could help you out.
->Day<-
Sun, 2005-10-30 22:35
#16
Layout is fine in firefox but not in explorer
mashman wrote:
Which link did u say isn't right cos it all looks fine in my FF?
It's not doing it now. By the way, this:
<li><H5 class="linktext"><a href="#">Background</li></a></H5>
should be like this:
<li><h5 class="linktext"><a href="#">Background</a></h5></li>
You close your tags in reverse order from which you opened them.
Mon, 2005-10-31 15:13
#17
Layout is fine in firefox but not in explorer
Day:Ive done the preloading thing so the rollover should be smoother now. Im using an image because of the 'cut corners' on the left and right images - is there a way to achive this with css?
Tyssen:Cheers for that but its still just moving the buttons and the text down instead of just the text. Is there a way that i can tag or otherwise distinguish just the text in between the <a> and </a> tags from the rest of the link so that i can move just the text?
mm
Mon, 2005-10-31 15:24
#18
Layout is fine in firefox but not in explorer
Day - ive just seen that the online version doesnt work (i dont know why) so bear with me while i use another method to preload my images. FYI i was using the method from:
Mon, 2005-10-31 16:41
#19
Layout is fine in firefox but not in explorer
mashman wrote:
Day:Ive done the preloading thing so the rollover should be smoother now. Im using an image because of the 'cut corners' on the left and right images - is there a way to achive this with css?
No. The cut corners would have to be pics, but you could make the middle items just color. Unless you can get a faster method to work. I liked the bit titled "Update" in the link you gave. Did you try that out? I'd be interested to hear how it went.
Quote:
Tyssen:Cheers for that but its still just moving the buttons and the text down instead of just the text. Is there a way that i can tag or otherwise distinguish just the text in between the <a> and </a> tags from the rest of the link so that i can move just the text?
I think you've probably got some collapsing margins. Google that phrase and read up on it. It was very enlightening when I did just that. The solution will involve adding padding: 1px 0 to the h5, I think. Well, read and play.
->Day<-
Mon, 2005-10-31 22:02
#20
Layout is fine in firefox but not in explorer
mashman wrote:
Tyssen: Cheers for that but its still just moving the buttons and the text down instead of just the text. Is there a way that i can tag or otherwise distinguish just the text in between the <a> and </a> tags from the rest of the link so that i can move just the text?
So you want the text to move down from the top of the background image? Well, you've got padding-top on h5.linktest - does that not do it? Or adding top padding to the <li>s should achieve the same result. Or margin top on h5.linktest.
I tried increasing your padding-top and it moved your text down but I can't see how it's working in relation to the rest of the layout cos the link on the previous page doesn't have any images or background colours in it now.
Mon, 2005-10-31 22:48
#21
Layout is fine in firefox but not in explorer
ok it should be back up - i was trying to preload the images i use, using the method from here : http://wellstyled.com/css-nopreload-rollovers.html
it worked on my local machine but didnt when i uploaded it?? - ill have to look at that later, i want to sort the link text out first.
the thing about the positioning of the text - ive tried doing all of those and either nothing happens or the whole menu moves down, not just the text.
im looking into what Day suggested about collapsing margins (without much success)
did you have this much of a headache when u started css?
mm
mm
Mon, 2005-10-31 23:00
#22
Layout is fine in firefox but not in explorer
mashman wrote:
did you have this much of a headache when u started css?
Yep.
OK, I've identified the area you need to look at:
#btnlist a { /*these are the properties, size etc, of each link*/
padding: 0px 3px 0px 0px; /* TOP : RIGHT : TOP/BOTTOM SPLIT : RIGHT */
border: 0px solid;
border-color: #ddd #000 #000 #ddd;
/*background-color: #999999;*/
background-image: url(btn.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
display:block;
width:100px;
height:141px;
padding-top:25px;
}
Work with padding-top and background-position to get it where you want it. Although, you don't really need to have a background image for the links that are just squares because the same thing could be accomplished using background colours.
Mon, 2005-10-31 23:06
#23
Layout is fine in firefox but not in explorer
i know but then they would all have to be rectangular - i want to keep the two end buttons with their corners cut
Mon, 2005-10-31 23:07
#24
Layout is fine in firefox but not in explorer
mashman wrote:
i know but then they would all have to be rectangular - i want to keep the two end buttons with their corners cut
I meant for the ones in between the ends (the ones that are just squares).
Mon, 2005-10-31 23:14
#25
Layout is fine in firefox but not in explorer
so the only thing stopping me doing it was the background-position - thanks a lot mate i cant believe after all that it was just that one line!!
which in ur opinion would be the best method for preloading - loading the images into an unused cell with display:none or trying to get the other method to work where the initial image is loaded with all of the button states in one image, which then gets shifted depending on the button state
or would it be enough just to leave the end buttons as they are (ie no preloading) and change the middle ones as you said to coloured cells?
last question i promise (for tonite)
Mon, 2005-10-31 23:34
#26
Layout is fine in firefox but not in explorer
mashman wrote:
the initial image is loaded with all of the button states in one image, which then gets shifted depending on the button state
That's the way I do my navigation list background images but I think in your case, you'd be better doing background colours for the centre links and use a different background image for your left & right links but with both off & on state in the same image like on the wellstyled.com example (so two different images, each with both states).
Tue, 2005-11-01 00:05
#27
Layout is fine in firefox but not in explorer
mashman wrote:
did you have this much of a headache when u started css?
Yeah. Don't worry, though. You'll figure it out. You're doing fine.
->Day<-
Tue, 2005-11-01 21:58
#28
Layout is fine in firefox but not in explorer
i think im just going to stick with images for all of the buttons.
if you remember the problem i had of moving the text down while keeping the bg image stationary - so that the text was about a third of the way down the image. The solution to that also extended the bottom of cell downwards resulting in...
http://www.student.livjm.ac.uk/engjbarn/
but even if i do go back to images it means that the rollovers are triggered when the cursor is a few pixels below the actual button!!!
i dont think there is a way around this is there?
mm
Tue, 2005-11-01 22:13
#29
Layout is fine in firefox but not in explorer
Try this out:
#btnlist a
{
border: none;
padding: 30px 1em 0;
text-decoration: none;
display: block;
width: 100px;
height: 141px;
}
I've not tested it, but I think it shoudl work... THere's no need to make the things taller.
->Day<-
Tue, 2005-11-01 22:48
#30
Layout is fine in firefox but not in explorer
cheers for that but it is still the same...
i think its just going to be easier to use images!
mm