I'm feeling like it is a lie at this point. This is the first site I'm actually trying to complete in CSS versus tables and frames and so far CSS seems a hell of a lot less compatible then tables and frames. I'm working on this (<!-- m --><a class="postlink" href="http://www.lockandkeyrock.com/html/main.html">http://www.lockandkeyrock.com/html/main.html</a><!-- m -->) site now and it seriously looks different in every browser I've viewed it with (on mac: Netscape, Safari, IE5 on win: IE6) and with each one there seems to be a different problem. My main gripes right now are:
1. I don't want the horizontal scroll bar to show at all under any circumstance.
2. The buttons need to be in place, not running off to the right of the interface.
3. The background for the content div needs to line up, it's in a different place in every browser I viewed!
I've been working on this for awhile now and I'm really starting to get frustrated. I'm thinking about converting it back to tables and an IFRAME but I really don't want to go back and do all that work. I want to believe CSS is legit but so far it seems a load of crap to me, or at least you have to know it inside and out before you can even think about using it.
If you can help me with these problems please let me know, I've posted a .zip file with the files
here (<!-- m --><a class="postlink" href="http://www.existest.org/html.zip">http://www.existest.org/html.zip</a><!-- m -->) with all the required files for you to go at it. Thanks in advance from a frustrated newb.Welcome to the world of CSS. Cross browser compatability is sometimes difficult to achieve, but it can be done. As for the horizontal scroll bar just add overflow-x:hidden; As for the other two things I don't have time right now to deal with them.I already have overflow-x: hidden; in the code and it still isn't working.Replace this (in your #contents styles):
scroll-x: hidden;
scroll-y: auto;
overflow: scroll;
overflow-x: hidden;
With this:
overflow: auto;
Don’t absolutely position them, that can be pretty sketchy. I would shoot for putting all the buttons in one flash file, instead of one file for each button. Is this possible? If not, place the flash buttons in a list, float the list items.
<ul id="nav">
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
</ul>
Style the list accordingly.
The background position looked fine for me (Firebird 0.7, IE 6, Windows), but setting the background-position property to fixed can cause some odd problems.
Some other things I noticed:
Why are you using an incomplete doctype? That’ll throw browsers into Quirks Mode, which is not fun at all.
Why is all the text wrapped in an H1 tag? Certainly that all isn’t a top-level heading. Wouldn’t a few well-placed P tags be more appropriate?Hi thanks for the help, I'll try this stuff out tomorrow night after work. I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).
I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?
Thanks.For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.Design in Moz w/ Webdeveloper Toolbar.
I'm working on a site (Totally CSS) and it looks great in every browser/screen res.One reason you're having so much trouble is you have an incomplete doctype so all the browsers are running in quirks mode. The number one requirement for a standard page is a full doctype.Originally posted by xdementia
I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).
I’m not sure I understand. CSS wise, an H1 tag is basically the same as any other. Semantically, however, an H1 tag and a P tag are very different. The tag you use should always be the most semantically appropriate tag. In this case, you have a bunch of paragraphs, thus they should be marked up with P tags.
Originally posted by xdementia
I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?
If it is possible, I would recommend placing the buttons into one complete file. However, if you do, a list is not necessary, as now we have only one element, rather than several (which, semantically, should be placed in a list, since it’s a list of menu bottons) of them.Hey,
Thanks, the overflow thing works, I guess I just had too much junk there.
As for the flash buttons I want to try the the list thing first before I go ahead and start putting everything into one file.
How do I get them to line up side by side in the list instead of on top of eachother (which it seems to be doing by default).Try the following CSS (the list will have the ID nav).
#nav {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
display: inline;
}
Something like that.For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.
All the sites I have done have first been done in firefox then I check on all the rest, I have never really had a problem with compatability just with IE everything else seems to be fine (netscape,Firefox,opera,Konqueror)I then have to mess around getting IE to look the same.
Not sure if your site does this on firefox or any other browsers as I have only got Konqueror at the moment but when scrolling it splits and looks really glitched. Just to let you know case it didnt do it in othersbumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:
1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.
2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.
3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.
That's it for now. Thanks in advance.Originally posted by xdementia
bumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:
1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.
2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.
3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.
That's it for now. Thanks in advance.
if you want it aligned on a specific spot on the page (not % wise as it sounds you dont) then use px. background-position: 10px 30px; that will place it 10 px from the left and 30px from the top. try using it this way and see if you get what you want
1. I don't want the horizontal scroll bar to show at all under any circumstance.
2. The buttons need to be in place, not running off to the right of the interface.
3. The background for the content div needs to line up, it's in a different place in every browser I viewed!
I've been working on this for awhile now and I'm really starting to get frustrated. I'm thinking about converting it back to tables and an IFRAME but I really don't want to go back and do all that work. I want to believe CSS is legit but so far it seems a load of crap to me, or at least you have to know it inside and out before you can even think about using it.
If you can help me with these problems please let me know, I've posted a .zip file with the files
here (<!-- m --><a class="postlink" href="http://www.existest.org/html.zip">http://www.existest.org/html.zip</a><!-- m -->) with all the required files for you to go at it. Thanks in advance from a frustrated newb.Welcome to the world of CSS. Cross browser compatability is sometimes difficult to achieve, but it can be done. As for the horizontal scroll bar just add overflow-x:hidden; As for the other two things I don't have time right now to deal with them.I already have overflow-x: hidden; in the code and it still isn't working.Replace this (in your #contents styles):
scroll-x: hidden;
scroll-y: auto;
overflow: scroll;
overflow-x: hidden;
With this:
overflow: auto;
Don’t absolutely position them, that can be pretty sketchy. I would shoot for putting all the buttons in one flash file, instead of one file for each button. Is this possible? If not, place the flash buttons in a list, float the list items.
<ul id="nav">
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
<li><!-- Flash code here --></li>
</ul>
Style the list accordingly.
The background position looked fine for me (Firebird 0.7, IE 6, Windows), but setting the background-position property to fixed can cause some odd problems.
Some other things I noticed:
Why are you using an incomplete doctype? That’ll throw browsers into Quirks Mode, which is not fun at all.
Why is all the text wrapped in an H1 tag? Certainly that all isn’t a top-level heading. Wouldn’t a few well-placed P tags be more appropriate?Hi thanks for the help, I'll try this stuff out tomorrow night after work. I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).
I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?
Thanks.For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.Design in Moz w/ Webdeveloper Toolbar.
I'm working on a site (Totally CSS) and it looks great in every browser/screen res.One reason you're having so much trouble is you have an incomplete doctype so all the browsers are running in quirks mode. The number one requirement for a standard page is a full doctype.Originally posted by xdementia
I had the text in a header because I wanted to make it it's own thing where I could specify different paramters of it (like margins and stuff which I didn't do yet cause I don't know how).
I’m not sure I understand. CSS wise, an H1 tag is basically the same as any other. Semantically, however, an H1 tag and a P tag are very different. The tag you use should always be the most semantically appropriate tag. In this case, you have a bunch of paragraphs, thus they should be marked up with P tags.
Originally posted by xdementia
I can probably make the flash buttons into one complete flash file pretty easily. If it's only one should I still put it in a list?
If it is possible, I would recommend placing the buttons into one complete file. However, if you do, a list is not necessary, as now we have only one element, rather than several (which, semantically, should be placed in a list, since it’s a list of menu bottons) of them.Hey,
Thanks, the overflow thing works, I guess I just had too much junk there.
As for the flash buttons I want to try the the list thing first before I go ahead and start putting everything into one file.
How do I get them to line up side by side in the list instead of on top of eachother (which it seems to be doing by default).Try the following CSS (the list will have the ID nav).
#nav {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
display: inline;
}
Something like that.For CSS i find building the site in firefox first then going back for IE etc is easier ive found less errors doing it this way.
All the sites I have done have first been done in firefox then I check on all the rest, I have never really had a problem with compatability just with IE everything else seems to be fine (netscape,Firefox,opera,Konqueror)I then have to mess around getting IE to look the same.
Not sure if your site does this on firefox or any other browsers as I have only got Konqueror at the moment but when scrolling it splits and looks really glitched. Just to let you know case it didnt do it in othersbumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:
1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.
2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.
3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.
That's it for now. Thanks in advance.Originally posted by xdementia
bumping this old thread of mine up again because I am nearing completion but still have one major issue here I can't seem to fix: the background position compatibility. Seems to be in a different place in every browser I view it in. I'm gonna try to just make it its own div and throw it in there as an image but don't know if it'll work. if you have any suggestions for keep in the right position let me know. Here's a basic list of the problems I am running into right now:
1. The "background-position:" tag is so damn confusing I can't tell what I'm doing in it. I end up just typing in random percentages for the values of this and hoping for the best. The only way I've managed to line this up is with a lot of guesswork.
2. Seems like some browsers (Safari) don't even respond to to the background-position: element. But either way it seems like they all treat the values differently.
3. Seems like it makes a big difference if the scrollbar is there or not. Sometimes if it's there it will screw up the alignment.
That's it for now. Thanks in advance.
if you want it aligned on a specific spot on the page (not % wise as it sounds you dont) then use px. background-position: 10px 30px; that will place it 10 px from the left and 30px from the top. try using it this way and see if you get what you want