I asked this question in a different thread but I asked it with a bunch of others. I have fixed all of my layout problems with my site except that when I view it in Opera it just looks bad. It looks fine in FF, Netscape, IE, but not in Opera. What is happening is I have the page centered and the div tag in the middle has a white background color and the area around the centered div tag has a gray background. The white from the centered div is overflowing into the gray area in all directions except up. It is really strange and I have no idea why it is happening. The page is here: <!-- m --><a class="postlink" href="http://www.ecdprint.com/test">http://www.ecdprint.com/test</a><!-- m -->. If anyone has any idea what is going on, please let me know. Thanks.
Edit:
I did a little playing around with Opera's settings and I noticed that if I go to the view and set it to fit to width the page looks right but if I go to view full screen it goes to looking bad with the white overflowing into the rest of the page. If someone could please take a look at it in Opera and at least confirm that I am not crazy, that would be great. Thanks.I'll check with OPERA in a minute... I noticed something on your pages last night and held my tongue (sic!), but this part here:
div id="logo1">
<!--- first logo background image is in this tag -->
</div>
<div id="logo2">
<!--- second logo background image is in this tag -->
</div>
<div id="logo3">
<!--- third logo background image is in this tag -->
</div>.... etc.
Firefox sometimes throws a wobbly if you have "---" in a comment. Perhaps Opera is tripping over the same thing....Remove height:inherit; from .mainOkay, -I checked with Opera. -Alot of things are not behaving right. Even in Firefox, things are moved around. See image. A link that should be on the navigation is 'dropped' and barely visible (circled in black with the word "Link" below it). It belongs to the far right, I believe(?).
The link being 'dropped down' is the cause of the vertical red&black gradient to be shifted to the right, and this drops the text/content way down (belongs up, largest black arrow in image).
I'll go through it and see what I can fix.
I attached a screen shot. It doesn't seem like it would be something to do with the comments in the logo. I changed the comments though and it didn't do anything. I had a third "-" in the beginning, but that shouldn't matter. A html comment has "<!-- -->" anyway, how else am I going to comment in a html document? And that doesn't make sense that a web browser would be having problems with something that has been a around for a very long time, and no other browser has any problem with it.Hmm, if you look at my screen shot, none of that happens when I look at it. Anyone else see that in any browser?I commented out the height:inherit; and that fixed it but now when i checked some of the other pages they overflow down and the page doesn't grow with it. And this is only happening in Opera, what is so special about how Opera renders a page from all the other browsers? Does it do it "better" than the rest, is it so exact with its interpretation of the code that any small error will rear its ugly face?Try height:auto;
Too much floating, as a quick estimate I would have used 4 floats not 30+a quick question, how am I supposed to get everything where I need it to be if I don't float it. Everything will either overlap or just scroll down. I will give the height auto a try, though I will need to do it in a few places.Still needs work, but here is what I changed:
CSS:
<style>
.navbar ul {position:relative; list-style-type:none; display:inline; width:760px; height:20px; margin:6px auto;}
.navbar ul li{border-left:2px solid #252525; padding:0 12px 0 12px;}
.navbar ul li a {color:white; font-weight:bold; height:100%; border-bottom:1px transparent;}
.navbar ul li a:hover {color:yellow; text-decoration:none; border-bottom:1px solid yellow;}
</style>
HTML:
<div class="navbar">
<ul>
<li style="border-left: none;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">My Account</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html">About Us</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html">Contact Us</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"products.html">Products</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">Support</a>
</li><li style="padding-right:0;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">Upload Files</a></li></ul>
</div>
See screenshot for results. Navbar needs to be centered, some small additional tweaks also needed. Notice that "Upload Files" is not on the navbar, not to the left of the red-black gradient and nearly invisible.
This allows red-black to be to the left, and that allows content to be to the right~of...
I shortened ul/li coding. -No need to throw a class="foo" on every list-iten, when you can seperated the CSS from the HTML and create one sets of rules that apply to EVERY list-item in that DIV. that way, -if you add more items, you won't need to add more class="foo". -Saved you a kilobyte or three right there...Float blocks of elements, position relative or absolute, use margins.I get the idea your going for but I am going to do it a little different so stuff still fits correctly. The way you have it, stuff shifts around and things do not line up right.... A html comment has "<!-- -->" anyway, how else am I going to comment in a html document? And that doesn't make sense that a web browser would be having problems with something that has been a around for a very long time, and no other browser has any problem with it.
A comment has an exclaimation point and two hyphens. A 'third hyphen' contiguous to the first two could (in therory) invoke a 'shell command' whatever that is. Certain characters are reserved for 'shell'. Like in javascript for instance, a "/" should be preceeded by a "\" to 'null' the next character...
I suppose the triple-hyphen warning would require having a different !doctype than yours, like xml or other(?). I am only repeating things that I have read in my studies. That this time it didn't affect a desireable solution in no way makes correcting it anything other than a good thing.Oh wow, well thats good to know. I will definitely be more careful about that stuff. I was talking to my boss and we decided that we don't even need a "support" link, because we really don't offer any kind of "support". So, I just took it out, hopefully that helps the link being pushed down. Could you take another look and see what happened? I never saw that happen on any machine I have looked on so I don't know. Oh, and I think that also, maybe the link was dropping down was becuase I set the width for the containing block to be inherit instead of defining it. The website itself it not supposed to get grow out sideways, so by setting the width of the containing block of the navagation links on the top should keep them in place. I hope. Well, if you could take another look and let me know that would be great. Thanks.
Edit:
I did a little playing around with Opera's settings and I noticed that if I go to the view and set it to fit to width the page looks right but if I go to view full screen it goes to looking bad with the white overflowing into the rest of the page. If someone could please take a look at it in Opera and at least confirm that I am not crazy, that would be great. Thanks.I'll check with OPERA in a minute... I noticed something on your pages last night and held my tongue (sic!), but this part here:
div id="logo1">
<!--- first logo background image is in this tag -->
</div>
<div id="logo2">
<!--- second logo background image is in this tag -->
</div>
<div id="logo3">
<!--- third logo background image is in this tag -->
</div>.... etc.
Firefox sometimes throws a wobbly if you have "---" in a comment. Perhaps Opera is tripping over the same thing....Remove height:inherit; from .mainOkay, -I checked with Opera. -Alot of things are not behaving right. Even in Firefox, things are moved around. See image. A link that should be on the navigation is 'dropped' and barely visible (circled in black with the word "Link" below it). It belongs to the far right, I believe(?).
The link being 'dropped down' is the cause of the vertical red&black gradient to be shifted to the right, and this drops the text/content way down (belongs up, largest black arrow in image).
I'll go through it and see what I can fix.
I attached a screen shot. It doesn't seem like it would be something to do with the comments in the logo. I changed the comments though and it didn't do anything. I had a third "-" in the beginning, but that shouldn't matter. A html comment has "<!-- -->" anyway, how else am I going to comment in a html document? And that doesn't make sense that a web browser would be having problems with something that has been a around for a very long time, and no other browser has any problem with it.Hmm, if you look at my screen shot, none of that happens when I look at it. Anyone else see that in any browser?I commented out the height:inherit; and that fixed it but now when i checked some of the other pages they overflow down and the page doesn't grow with it. And this is only happening in Opera, what is so special about how Opera renders a page from all the other browsers? Does it do it "better" than the rest, is it so exact with its interpretation of the code that any small error will rear its ugly face?Try height:auto;Too much floating, as a quick estimate I would have used 4 floats not 30+a quick question, how am I supposed to get everything where I need it to be if I don't float it. Everything will either overlap or just scroll down. I will give the height auto a try, though I will need to do it in a few places.Still needs work, but here is what I changed:
CSS:
<style>
.navbar ul {position:relative; list-style-type:none; display:inline; width:760px; height:20px; margin:6px auto;}
.navbar ul li{border-left:2px solid #252525; padding:0 12px 0 12px;}
.navbar ul li a {color:white; font-weight:bold; height:100%; border-bottom:1px transparent;}
.navbar ul li a:hover {color:yellow; text-decoration:none; border-bottom:1px solid yellow;}
</style>
HTML:
<div class="navbar">
<ul>
<li style="border-left: none;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">My Account</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html">About Us</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html">Contact Us</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"products.html">Products</a>
</li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">Support</a>
</li><li style="padding-right:0;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.html">Upload Files</a></li></ul>
</div>
See screenshot for results. Navbar needs to be centered, some small additional tweaks also needed. Notice that "Upload Files" is not on the navbar, not to the left of the red-black gradient and nearly invisible.
This allows red-black to be to the left, and that allows content to be to the right~of...
I shortened ul/li coding. -No need to throw a class="foo" on every list-iten, when you can seperated the CSS from the HTML and create one sets of rules that apply to EVERY list-item in that DIV. that way, -if you add more items, you won't need to add more class="foo". -Saved you a kilobyte or three right there...
Float blocks of elements, position relative or absolute, use margins.I get the idea your going for but I am going to do it a little different so stuff still fits correctly. The way you have it, stuff shifts around and things do not line up right.... A html comment has "<!-- -->" anyway, how else am I going to comment in a html document? And that doesn't make sense that a web browser would be having problems with something that has been a around for a very long time, and no other browser has any problem with it.A comment has an exclaimation point and two hyphens. A 'third hyphen' contiguous to the first two could (in therory) invoke a 'shell command' whatever that is. Certain characters are reserved for 'shell'. Like in javascript for instance, a "/" should be preceeded by a "\" to 'null' the next character...
I suppose the triple-hyphen warning would require having a different !doctype than yours, like xml or other(?). I am only repeating things that I have read in my studies. That this time it didn't affect a desireable solution in no way makes correcting it anything other than a good thing.
Oh wow, well thats good to know. I will definitely be more careful about that stuff. I was talking to my boss and we decided that we don't even need a "support" link, because we really don't offer any kind of "support". So, I just took it out, hopefully that helps the link being pushed down. Could you take another look and see what happened? I never saw that happen on any machine I have looked on so I don't know. Oh, and I think that also, maybe the link was dropping down was becuase I set the width for the containing block to be inherit instead of defining it. The website itself it not supposed to get grow out sideways, so by setting the width of the containing block of the navagation links on the top should keep them in place. I hope. Well, if you could take another look and let me know that would be great. Thanks.