View Full Version : Why does it look different in FF and IE?
momonline
05-10-2008, 10:20 PM
Can someone please tell me what code I would need to add to have the view the same in both FF and IE:
www.makeovermagic.org/index2.htm
I want the scroll to only be on the bottom...IE is doing this correctly...FF is not.
Thanks!
EDIT: Here's the "middle-frame" page:
http://www.makeovermagic.org/middle-frame.html
Try this maybe:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="1000%" id="AutoNumber1" align="left">
Replace that with:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; overflow-y: none;" width="1000%" id="AutoNumber1" align="left">
momonline
05-11-2008, 03:56 AM
Thanks Nile, but it's still not working in FF.
www.makeovermagic.org/index2.htm
www.makeovermagic.org/middle-frame.html
Ok, I'm not good at all at the style with x & y. So change the script above to this:
[code]
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; overflow-x: none;" width="1000%" id="AutoNumber1" align="left">
momonline
05-11-2008, 04:08 AM
Sorry :( still not working in FF -- oddly enough changing to "x" or "y" had no effect in FF or IE -- didn't change anything...I also read something online somewhere about "x" and "y" overflow -- but I have no clue how to apply it.
www.makeovermagic.org/index2.htm
www.makeovermagic.org/middle-frame.htm
Medyman
05-11-2008, 07:38 AM
First 2 questions, then 1 answer:
Question:
1. Can I ask why you're using frames here? You should give this (http://websitetips.com/articles/html/frames/) article a read and make an informed decision about living with the negatives that frames bring. From a layout standpoint, you're not doing anything that would require frames here. It can all be done with standard HTML/CSS.
2. What happened to those spiffy image sliders that Blizzard and I made you? :p Just kidding. You're obviously not obligated to use them.
You're answer.
Fx doesn't like percentages larger than 100%. So, to fix it in all browsers specify a pixel amount (say, 99999px?). That should get you on the way if not fix it. I didn't do too much searching. If this doesn't work post back :D
momonline
05-11-2008, 03:58 PM
Hi Medyman!
I absolutely plan on using the image sliders...I just wanted to get the layout down first...I haven't had time to work on it yet...I love the sliders!
I am completely self-taught in website making and I really have no idea the correct way to go about things, so I just basically see something I like on another site and try to copy it. So as far as frames go, I saw a site I liked and wanted to use it. I don't know the first thing about "standard HTML/CSS" -- I did read the link that you had given me previously but I had no clue!
Now, as far as the sliders go, can they be applied to the pics as they are now in the frame?
Also, changing the pixel amount fixed FF so that I get the bottom scroller...thank you! BUT the right scroller still shows up in FF...can this be eliminated?
Sorry for the long reply ;) but thank you for your time :)
Medyman
05-11-2008, 05:05 PM
I am completely self-taught in website making and I really have no idea the correct way to go about things, so I just basically see something I like on another site and try to copy it. So as far as frames go, I saw a site I liked and wanted to use it. I don't know the first thing about "standard HTML/CSS" -- I did read the link that you had given me previously but I had no clue!
That's what this forum is for. Ask any questions you may have. For all practical purposes -- forgetting the technical and geeky reasons not to use frames -- it does make a difference in your search engine results...a negative difference. So, if that is important to you, you might want to change your approach.
Otherwise, there really is not practical harm in doing it with frames.
Switching to a non-frame solution in your case, wouldn't be difficult at all. It's just a matter of merging those two files into one and taking on the frameset bit. Pretty easy.
Now, as far as the sliders go, can they be applied to the pics as they are now in the frame?
Yeah, you shouldn't have any problems with that.
Also, changing the pixel amount fixed FF so that I get the bottom scroller...thank you! BUT the right scroller still shows up in FF...can this be eliminated?
Sure thing...
Either apply overflow-y:hidden and define a height or apply overflow-y:visible
momonline
05-11-2008, 05:16 PM
Medyman,
Remember, you're talking to someone who has absolutely no idea how/where to apply changes :D
Where would I put the "overflow" code?
If all else fails, you can try making the scroll bar black so it is not visible.
scrollbar-face-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
Medyman
05-11-2008, 07:28 PM
Medyman,
Remember, you're talking to someone who has absolutely no idea how/where to apply changes :D
Where would I put the "overflow" code?
Sorry...I should have explained better. Since, you're already using inline styles on the <table> tag, just tack these on to the end (i also changed to overflow-x:none to overflox-x:auto.
style="border-collapse: collapse; overflow-x:auto; height:470px; overflow-y:hidden;"
If all else fails, you can try making the scroll bar black so it is not visible.
scrollbar-face-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
That wouldn't solve much. Colored scrollbars only work in IE.
momonline
05-11-2008, 11:50 PM
Medyman, am i doing something wrong? The right scrollbar still shows up in FF.
www.makeovermagic.org/index2.htm
www.makeovermagic.org/middle-frame.html
EDIT: Also, now the right scrollbar is showing up in IE...how can I get rid of it there too?
Medyman
05-12-2008, 01:37 AM
You can increase the height. The height should equal your images plus the 15 or so pixels that the scrollbar takes up.
If I can suggest one thing, the unnecessary use of frames here is really bugging be. I'd recommend going for just one HTML page and code like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Make Over Magic</title>
<style type="text/css">
html,body { background-color:#000; padding:0; margin:0; }
#images { width:100%; overflow-x:auto; height:490px; overflow-y:hidden; }
#images ul { margin:0; padding:0; list-style:none; width:1680px; }
#images ul li { display:inline; }
</style>
</head>
<body>
<div id="header">
<img src="http://www.makeovermagic.org/banner.jpg" alt="Make Over Magic">
</div>
<div id="images">
<ul>
<li><img src="http://www.makeovermagic.org/O470.jpg" alt=""></li>
<li><img src="http://www.makeovermagic.org/J470.jpg" alt=""></li>
<li><img src="http://www.makeovermagic.org/I470.jpg" alt=""></li>
<li><img src="http://www.makeovermagic.org/R470.jpg" alt=""></li>
<li><img src="http://www.makeovermagic.org/K470.jpg" alt=""></li>
</ul>
</div>
<div id="footer">
© Make Over Magic
</div>
</body>
</html>
I'm not sure what all that javascript was for on your current website. But that can be added back in.
To add more images, you would simply add another element to the unordered list, like so:
<li><img src="path/to/image" alt="caption/title"></li>
and you would need to edit the highlighted portion below to specify the total width of the scrolling panel.
#images ul { margin:0; padding:0; list-style:none; width:1680px; }
You could also look into using some javascript for the scrolling bit. I recommend using the jCarousel (http://sorgalla.com/jcarousel/) plugin for jQuery (http://jquery.com/). My personal opinion about using the overflow:auto property to display a scrollbar is that it takes away a lot more in aesthetics than it adds in functionality. I usually will always side with form vs. function except on scrollbars. I find the default browser scrollbars to be ugly. So, I prefer javascript.
Anyway, that should solve all your woes.
momonline
05-12-2008, 02:26 AM
THANK YOU SOOOOOOOOOOOO MUCH!!!
http://www.makeovermagic.org/index2.htm
That's exactly how I want it...like i told you, I am self-taught and don't know the first thing between "frames" and CSS and whatever :) so I didn't understand the alternative but that IS PERFECT!!!!
Okay, a couple of questions, if you don't mind.
1. I'm having problems renaming this to be my home page...I get an error message...any suggestions?
2. On the bottom where it is black, I want to add a couple of links, i.e., "contact" and maybe one or two others...how/where would that go?
I think that's it for now ;)
EDIT: How/where do I control the top black portion margin where the banner currently is? I will probably be replacing that banner. Will automatically resize the top black area or is the size already fixed in the code...make sense?
2ND EDIT: UH OH, NEW PROBLEM...IE is only showing the first photo :(
Medyman
05-12-2008, 03:37 AM
I'm having problems renaming this to be my home page...I get an error message...any suggestions?
What's the error message?
On the bottom where it is black, I want to add a couple of links, i.e., "contact" and maybe one or two others...how/where would that go?
Add that within the footer div. I added a fake copyright notice for illustration in the code I posted earlier. You won't see it on the page because the default color is black and the background is black.
To style your links how you want, add the following the the CSS:
#footer a {
color: white; /* the links color */
text-decoration: none; /* can also be underline */
font-weight:bold; /* remove this line if you don't want it to be bold */
font-family: Arial;
font-size: 12px;
}
#footer a:hover {
color:red; /* color when you hover over the link */
}
How/where do I control the top black portion margin where the banner currently is?
To control the margin on the header, add the following to the CSS:
#header {
margin:10px;
}
Will automatically resize the top black area or is the size already fixed in the code...make sense?
Yes, it will resize to accommodate whatever size image you add.
UH OH, NEW PROBLEM...IE is only showing the first photo
Did you change something? I just tested in IE7 and IE6 and they both work fine.
momonline
05-12-2008, 01:17 PM
I believe I can change this to my homepage, it was something I was doing wrong.
On my laptop with IE7, I am still only getting the first pic to appear. I will try it on my desktop comp later today to see if it does it there too.
Thanks for the info on header/footer...I'll be updating that shortly.
EDIT: What mouse-over code would you recommend?
Medyman
05-12-2008, 03:12 PM
It's the little things that kill ya. :p
You forgot to add the closing bracket on the images div.
You have:
<div id="images"
it should be:
<div id="images">
What mouse-over code would you recommend?
I've used the same domroll js that you're using successfully several times. Unless it doesn't work for you, I'd just stick with that one.
momonline
05-12-2008, 04:02 PM
Medyman...WOW, it's perfect...I can't thank you enough for all your help with this...
IE7 is now working...thanks for noticing that...i retyped your code above and missed that one.
I added the mouse-over domroll after my post, so I'm glad you would go with that one too!
So far, so good *keeping fingers crossed*...
Medyman
05-12-2008, 05:35 PM
You're very welcome. Glad it all worked out.
Let us know if you need any more help.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.