Expression >
Forums Home
>
Expression Studio Forums
>
Expression Web and SuperPreview
>
Why won't the div centre in ie8, but will in firefox and Opera?
Why won't the div centre in ie8, but will in firefox and Opera?
- Hi,
The header won't centre in IE8 and IE7 and IE6. Do you know why?
http://web.bethere.co.uk/urwayormine/trying_to_get_this_to_work.html
Thanks
All Replies
- Impossible to tell, since it does center in ie6,7, and 8 on my machine. Of course, in IE6, the supposedly transparent corners are visible, since ie6 does not support png alpha transparency. Use gifs instead.
cheers,
scott - Why are you giving the width of the container a value of 60em? Read up on em units to understand why this will not be a consistent width.
Also, I show it centering in ie8
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign Impossible to tell, since it does center in ie6,7, and 8 on my machine. Of course, in IE6, the supposedly transparent corners are visible, since ie6 does not support png alpha transparency. Use gifs instead.
Strange, as it is not centering in any IE browser on my laptop...
cheers,
scott
And yes, I will be making seperate gifs for IE6- "And yes, I will be making seperate gifs for IE6"
Just so you know, you should be using gifs for all of those background images. IIRC, they are basically black and white, or in any event, under 256 colors, and are very simple, with large expanses of the same color and no graduated shadows. That type of image is perfect for gif, and gif's binary transparency is supported in all graphical browsers, even the most primitive. By adopting gif, you avoid having to have multiple declarations to cover different browsers, as well as achieving smaller file sizes.
cheers,
scott Why are you giving the width of the container a value of 60em? Read up on em units to understand why this will not be a consistent width.
I did read up on ems. Originally, the template I used had the width set at 45em, which was too narrow for my background design. 60em = 960px- which is the exact width of my background image.
Also, I show it centering in ie8
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- 60em only equals 960px for some fonts at one specific font size. em is sized based off of the current font. Fonts and font sizes change, therefore the width changes. Don't size fixed width containers with em sizes - its the wrong use of that unit.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign - Chris,
There are good reasons to use ems for container widths from an accessiblity point of view. That way the container will expand with the text size is increased in browsers like IE 6 that don't offer a zoom mode. Whether or not you want the container to expand with the text size is up to the designer.
For Maria's issue using a fixed pixel size container is a better choice but there are good reasons to use ems for container sizes.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes 60em only equals 960px for some fonts at one specific font size. em is sized based off of the current font. Fonts and font sizes change, therefore the width changes. Don't size fixed width containers with em sizes - its the wrong use of that unit.
Understood.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
However, can you explain to me why the template I used, which one of the frequent female contributors posted a link to (maybe Cheryl or Kathy) on an old thread of mine, had a fixed width set to 45 em?
Also, if I specify a specific font and size, can I still have a fixed width in ems?
Take for example this piece of CSS which I did not include on the page I published:
body {
font: 100% Tahoma, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
color: #000000;
background-color: #A5B101;
width: 60em;
margin: 0 auto;
}Chris,
There are good reasons to use ems for container widths from an accessiblity point of view. That way the container will expand with the text size is increased in browsers like IE 6 that don't offer a zoom mode. Whether or not you want the container to expand with the text size is up to the designer.
For Maria's issue using a fixed pixel size container is a better choice but there are good reasons to use ems for container sizes.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
That's why I said fixed width containers. The OP has a rounded corner background and it would require a fixed width container. This why she needed to read up on em units.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign60em only equals 960px for some fonts at one specific font size. em is sized based off of the current font. Fonts and font sizes change, therefore the width changes. Don't size fixed width containers with em sizes - its the wrong use of that unit.
Understood.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
However, can you explain to me why the template I used, which one of the frequent female contributors posted a link to (maybe Cheryl or Kathy) on an old thread of mine, had a fixed width set to 45 em?
Also, if I specify a specific font and size, can I still have a fixed width in ems?
Take for example this piece of CSS which I did not include on the page I published:
body {
font: 100% Tahoma, Helvetica, Arial, sans-serif; margin: 0;
padding: 0;
color: #000000;
background-color: #A5B101;
width: 60em;
margin: 0 auto;
}
Without seeing the template rendered it could be many reasons. It could use em units to allow the container to grow and shrink for accessibility reasons. It may be a container which does not require a fixed width.
I never said not to use em units for a container. I said not to use em units for a fixed width container. Big difference.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- Look at it this way, em refers to the "m-width" value of the currently active font at the currently specified font size. The m-width (so-used because the letter "m" is typically the widest in any font) varies depending not only upon font size, but also upon the font chosen itself. One of the things which gives fonts variety is how their fundamental characteristics vary among fonts, even at the same nominal font size. Differing x-heights, x-widths, m-widths, descender and ascender heights, etc. can cause radically different appearance between two faces at exactly the same font size. (Compare Bernhardt Modern, with a very small x-height, to Verdana or Tahoma, with a large x-height, for an obvious example.)
The point is, if you are interested in a fixed-width, centered page, basing your content section size upon such a mutable quantity may not be the best approach. Yes, there are times when using ems is appropriate, such as when building an elastic or a hybrid elastic/liquid layout. However, ems can be tricky, with size calculations cascading, and determining the size of elements several layers deep in a hierarchy, each of which uses ems, can be... interesting.
You don't need that hassle. Regardless of whether the original template creator intended to use an elastic layout, and therefore specified ems, you can still use pixels, and for a fixed-width, centered layout such as yours, I certainly would.
Also google "css fixed elastic liquid layout" for more information on the different approaches, and "typographic measure" for more information on typography (particularly before you try to use typographically-based units of measure).
cheers,
scott - Just to confuse the issue, it doesn't display properly for me in FF. The right side and the bottom of the background image are cut off. The only way I can get the right side rounded corner to display is if I zoom the text, which of course widens and lengthens the container. However, this makes a horizontal scroll bar appear, and the image stays on the left side, with a big white space on the right. This clearly isn't the intended effect. I'm not sure why it displays like that on mine, but it does. Possibly due to monitor size/resolution. Any suggestions on a fix?
Jim 60em only equals 960px for some fonts at one specific font size. em is sized based off of the current font. Fonts and font sizes change, therefore the width changes. Don't size fixed width containers with em sizes - its the wrong use of that unit.
Understood.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
However, can you explain to me why the template I used, which one of the frequent female contributors posted a link to (maybe Cheryl or Kathy) on an old thread of mine, had a fixed width set to 45 em?
Also, if I specify a specific font and size, can I still have a fixed width in ems?
Take for example this piece of CSS which I did not include on the page I published:
body {
font: 100% Tahoma, Helvetica, Arial, sans-serif; margin: 0;
padding: 0;
color: #000000;
background-color: #A5B101;
width: 60em;
margin: 0 auto;
}
Without seeing the template rendered it could be many reasons. It could use em units to allow the container to grow and shrink for accessibility reasons. It may be a container which does not require a fixed width.
I never said not to use em units for a container. I said not to use em units for a fixed width container. Big difference.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
Thanks for clarifying this. It is very helpful!
Yes, the template I donwloaded didn't require a fixed width as there was no background image in the container, unlike mine.- Trying to use a template for a liquid layout with a fixed background image is rather... counterproductive.
cheers,
scott Trying to use a template for a liquid layout with a fixed background image is rather... counterproductive.
cheers,
scott
I'm not trying to create a liquid layout, Scott- more of an elastic one so the text doesn't break too much if a user expands the text.
This was suggested on another thread of mine. (http://social.expression.microsoft.com/Forums/en-US/web/thread/826b96fe-d9b4-436d-ab3e-d20c111157de )
As for the template I'm using, here is on the site Cheryl referred me to:
It's the template callled "Single centered column with masthead " http://by-expression.com/content/samples.aspx
You see, I have "cut up" my background container image into slices, so although I won't be able to repeat the background image in the masthead, I will be able to do so under the div on my site called "maincontent".
http://web.bethere.co.uk/urwayormine/last.html
I did not say you were trying to create a liquid layout, Maria. Read my post. I said that trying to use a liquid layout template to overlay fixed-size background images was counterproductive. In your application, where you intend to create a layout which overlays the fixed-size background, it is counterproductive, and the same thing is true of an elastic layout template, which you clearly state in this message you are using. Regardless of which general strategy you apply for a flexible layout, liquid or elastic, neither will work with a fixed background. Understand?Trying to use a template for a liquid layout with a fixed background image is rather... counterproductive.
cheers,
scott
I'm not trying to create a liquid layout, Scott- more of an elastic one so the text doesn't break too much if a user expands the text.
If your page structural elements are free to grow and shrink in width, as with either a liquid or elastic layout, and as will be the case if you horizontally size in ems, which are tied to font size, then your layout will potentially move with respect to your fixed-size background image and the layout will break. Capiche?
cheers,
scott"And yes, I will be making seperate gifs for IE6"
Hmmm.. You have a point. I will get around to changing the relevant images to gif for the next time I publish the site.
Just so you know, you should be using gifs for all of those background images. IIRC, they are basically black and white, or in any event, under 256 colors, and are very simple, with large expanses of the same color and no graduated shadows. That type of image is perfect for gif, and gif's binary transparency is supported in all graphical browsers, even the most primitive. By adopting gif, you avoid having to have multiple declarations to cover different browsers, as well as achieving smaller file sizes.
cheers,
scott- Okay. There have been major changes to the pages.
I've actually changed the template of Cheryl's that I was using to the Northern Lights one.
Here is the index page: http://web.bethere.co.uk/urwayormine/index.html
And here is the "About Us" page: http://web.bethere.co.uk/urwayormine/about-us.html
Everything is fine on firefox for both pages on firefox. Everthing looks fine on the index page on ie8 but the slider won't slide for some reason. In addition, ie7 and ie6 has placed the slider div to the top of the index page for some reason. Even changing the margin settings to the CSS makes no change...And then again, there is the issue with the sliding gallery. (The menu is also a bit dogy on ie6) You might want to take a look at the links you referenced in your last post. "Looks fine in IE8" would not be an accurate description. Did you publish the CSS?
You might want to take a look at the links you referenced in your last post. "Looks fine in IE8" would not be an accurate description. Did you publish the CSS?
Looks like there was an error with publishing so I'm re-publishing the site at this moment. (The pages do look fine on my local site, but clearly not on my published site.)- Now that you've republished...
"Everthing looks fine on the index page on ie8 but the slider won't slide for some reason."
Sure it does. Now that you've republished...
Hmmmm....looks like Scott's sarcasm is rubbing off on you . : (or however you do the smile sign)
"Everthing looks fine on the index page on ie8 but the slider won't slide for some reason."
Sure it does.
Kathy, I did republish but Expression Web is indicating that the files on the remote server are "unchanged". I don't know why this is. It looks like I'll have to republish...- Edited byMaria Web Thursday, July 02, 2009 2:50 PM
That wasn't sarcasm. It was a statement of fact. You said you republished, the page certainly looked changed, and the slider on the page did work in IE8.
- Well, the slider moves to a different vertical location when I switch from IE8 to IE7 (it overlays the pics in IE7). Is there a reason for the slider? (from a visitor's point of view) What are they to view by moving the slider? Just catalog shots of RAM that they may or may not be able to buy? Will you update the photos constantly to reflect current stock? Will there be more pictures instead of the same few repeated over and over? Will they be able to link by clicking on one and go to that page? If not, the sliding pictures seem perfectly pointless to me.
And the whole site jumps 10 pixels sideways in Firefox and IE8 when I switch from Home to About page and back.
In Firefox, the site zooms badly, although I don't see the same effects in IE (Get RAM and Quality RAM Only collide oddly when zoomed)
As a visitor/potential customer to a site that I may not be familiar with, the statement in the footer would put me right off--"Any persons who intentionally copy any segment of RAM, autonomy & I page designs will be pursued for prosecution." No. They won't. You don't have the resources. You're not scaring anyone. A simple copyright notice would suffice. You seem to forget that the WWW is World Wide. Are you seriously going to take legal action in a foreign country? If this were a good idea, the Beeb or CNN or Audi would be putting similar statements in their footers. This is not the way to make friends or customers.
The plural of logo is logos not logo's. - Unless what is published is not the latest version, there are completely different style sheets for non-IE, IE6, IE7, and IE8, with repeated content. (Are you really planning to keep those all synched up?) What you should have is one style sheet with everything in it, for all browsers, followed by, if needed, browser-specific sheets containing *only* what is additional or different. Much easier to maintain.
That wasn't sarcasm. It was a statement of fact. You said you republished, the page certainly looked changed, and the slider on the page did work in IE8.
I see.
Regardless, I deleted everything on my remote site, and copied everything from my local site to my remote site.
Now both the local and remote site look identical.
And again, the slider in ie8 is not working.Well, the slider moves to a different vertical location when I switch from IE8 to IE7 (it overlays the pics in IE7).
I've noted this too. It's a problem which doesn't seem to be fixed with ammending the margin settings of the slider in the specific ie7 CSS style sheet.
Any suggestions for a fix?...
Is there a reason for the slider? (from a visitor's point of view) What are they to view by moving the slider? Just catalog shots of RAM that they may or may not be able to buy? Will you update the photos constantly to reflect current stock? Will there be more pictures instead of the same few repeated over and over? Will they be able to link by clicking on one and go to that page? If not, the sliding pictures seem perfectly pointless to me.
For one, it's aesthetically pleasing to the eye. Also, it serves as a device for advertising specific ram sticks (perhaps ones on sale etc).
The pictures I have, and almost all of the text I have are more or less dummies. I'm just trying to get the look and feel of the site correct first before I get into specifics .
And yes, I do plan to link the images of RAM to specific pages which include detail- as I've seen done on a few other sites.
And the whole site jumps 10 pixels sideways in Firefox and IE8 when I switch from Home to About page and back.
I'm not experiencing the same problems you are having with the whole site jumping sideways, on firefox or ie8.
In Firefox, the site zooms badly, although I don't see the same effects in IE (Get RAM and Quality RAM Only collide oddly when zoomed)
As a visitor/potential customer to a site that I may not be familiar with, the statement in the footer would put me right off--"Any persons who intentionally copy any segment of RAM, autonomy & I page designs will be pursued for prosecution." No. They won't. You don't have the resources. You're not scaring anyone. A simple copyright notice would suffice. You seem to forget that the WWW is World Wide. Are you seriously going to take legal action in a foreign country? If this were a good idea, the Beeb or CNN or Audi would be putting similar statements in their footers. This is not the way to make friends or customers.
[laugh] Okay, the language is a tad bit extreme. But again, much of the text on my site has not been finalised, as I've mentioned before.
Yes, the point was to scare people, even if I couldn't put my money where my mouth was. I will make ammendments later.
The plural of logo is logos not logo's.
Thanks for the grammar correction. [smile]
- The is the structure of my CSS (placed in a style folder):
debugging.css - Special overrides for debugging that shows me how elements flow
default.css - contains all my default styles applied to a website. This will contain sections for each page
hack-ie6.css - contains hacks for ie6 to isolate styles just to that browser
hack-ie7.css - same as above except for ie7
hack-opera.css - same as above except for opera
layout.css - contains the styles that drive the layout (the base template, no content) such as Header, Menu, Footer, Content Area, Side-bars
reset.css - A special CSS style sheet that resets everything. Gives my styles the best chance at being cross browser compliant from the start
style.css - The one style sheet to rule them all. Contains only imports of above and is the only stylesheet being called from a page.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign The is the structure of my CSS (placed in a style folder):
I tried to take you and Kathy's advice, but now take a look at my page: http://web.bethere.co.uk/urwayormine/index.html . As you can see, the page isn't rendering correctly.
debugging.css - Special overrides for debugging that shows me how elements flow
default.css - contains all my default styles applied to a website. This will contain sections for each page
hack-ie6.css - contains hacks for ie6 to isolate styles just to that browser
hack-ie7.css - same as above except for ie7
hack-opera.css - same as above except for opera
layout.css - contains the styles that drive the layout (the base template, no content) such as Header, Menu, Footer, Content Area, Side-bars
reset.css - A special CSS style sheet that resets everything. Gives my styles the best chance at being cross browser compliant from the start
style.css - The one style sheet to rule them all. Contains only imports of above and is the only stylesheet being called from a page.
--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign
When I make ammendments to the browser specific css, no changes happen when I view the page in a browser. It seems that the browser is only reading the CSS in the attached style sheet alone and not the browser specific CSS .
My format is slightly different from yours. I have one basic style sheet attached , and have simply typed in additional browser specific CSS in the CSS section of the page, as Kathy has suggested. I don't think it needs to be any more complicated than that...My format is slightly different from yours. I have one basic style sheet attached , and have simply typed in additional browser specific CSS in the CSS section of the page, as Kathy has suggested. I don't think it needs to be any more complicated than that...
Except that you will have to add that browser-specific CSS to every page, unlike the case if it were in an external stylesheet. Generally speaking, the only thing you want in the embedded style section is page-local CSS for styling elements unique to that page. Elements which are common to multiple or all pages, and of course, basic structural layout, should be in an external stylesheet.
cheers,
scott- "My format is slightly different from yours. I have one basic style sheet attached , and have simply typed in additional browser specific CSS in the CSS section of the page, as Kathy has suggested. I don't think it needs to be any more complicated than that..."
My suggestion was "followed by, if needed, browser-specific sheets containing *only* what is additional or different"
You don't put browser-specific stuff in the page, unless you are going to put it on every page. You put it in a separate style sheet for that browser, called by a conditional statement after the main CSS sheet has already been read, so that it overrides the original sheet for those style elements that you have added or changed for the specific browser. This extra style sheet should be very short, containing only those things to be added to the original style sheet, or changed from it. - "Regardless, I deleted everything on my remote site, and copied everything from my local site to my remote site.
Now both the local and remote site look identical.
And again, the slider in ie8 is not working. "
Well, the slider works for me in IE8. Just tried it, refreshed the page, etc.. - Just FYI, your menus aren't working in any browser I view it in. When I hover over the main menu it displays the submenus, but they disappear the moment I move my cursor down. That makes it pretty hard to access other pages.
Also, not to beat a dead horse, but you still have heights assigned for your header and footer. That would be fine if they didn't contain text, but they both break when I zoom text two or three times.
Finally, the red line doesn't work well as a background image. Whenever text is resized, the line changes position relative to the text, resulting in it displaying behind the text instead of neatly in white space. You should try just placing the image inline where you want it.
Jim My format is slightly different from yours. I have one basic style sheet attached , and have simply typed in additional browser specific CSS in the CSS section of the page, as Kathy has suggested. I don't think it needs to be any more complicated than that...
Except that you will have to add that browser-specific CSS to every page, unlike the case if it were in an external stylesheet. Generally speaking, the only thing you want in the embedded style section is page-local CSS for styling elements unique to that page. Elements which are common to multiple or all pages, and of course, basic structural layout, should be in an external stylesheet.
cheers,
scott
Thanks! I've done this now- but the page is still not rendering correctly...."My format is slightly different from yours. I have one basic style sheet attached , and have simply typed in additional browser specific CSS in the CSS section of the page, as Kathy has suggested. I don't think it needs to be any more complicated than that..."
My suggestion was "followed by, if needed, browser-specific sheets containing *only* what is additional or different"
You don't put browser-specific stuff in the page, unless you are going to put it on every page. You put it in a separate style sheet for that browser, called by a conditional statement after the main CSS sheet has already been read, so that it overrides the original sheet for those style elements that you have added or changed for the specific browser. This extra style sheet should be very short, containing only those things to be added to the original style sheet, or changed from it.
I see. I've now put the additional CSS in its own individual style sheet, enclosed with additional comments. The menu still looks funny though: : http://web.bethere.co.uk/urwayormine/index.html.
For the stuff specific to the page, I have actually removed from the main style sheet page and have put it into the external style sheet. Perhaps this is causing the problem?...- Jim, I think we're in the realm of making random changes without having any clue whatsoever what the consequences will be, in the hope that somehow some magic combination will be arrived at which works. As a result, of course, the incarnation of the page as it stands now (1410 on July 2, '09) is even more broken than it was at the beginning of this thread. Not surprising, given that the OP has continued to ignore advice about not putting heights on text-containing elements, and apparently still has not learned anything about the fundamental structure of an HTML page, and, from the most recent posts, still hasn't got a grasp on how to apply CSS.
A couple of threads ago it was recommended that the OP just simply stop working on the site and take the HTML and CSS courses available from W3C to gain some understanding of what she was doing, to which she replied that she was "on it." Apparently the meaning of that expression has changed. I thought it carried the meaning of "understood, will comply" (kinda like "wilco" in a previous generation). Now it seems to mean instead, "I hear you, but I think I'll just carry on in ignorance," at least in the current context.
And tell me, how do you handle the contention that that butt-ugly slider is "... aesthetically pleasing to the eye?" Oh, well, I suppose that if beauty is in the eye of the beholder, then so is ugliness...
cheers,
scott - I agree with Scott. It appears as if you're making changes without a true understanding of what you're doing. Step back, and take some online courses on HTML and CSS. If you have already, then take another. If you continue to make change without understanding it becomes a circular error where every change introduces a new problem.
--
Chris Hanscom - Microsoft MVP
Veign on Facebook | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign Jim, I think we're in the realm of making random changes without having any clue whatsoever what the consequences will be, in the hope that somehow some magic combination will be arrived at which works. As a result, of course, the incarnation of the page as it stands now (1410 on July 2, '09) is even more broken than it was at the beginning of this thread. Not surprising, given that the OP has continued to ignore advice about not putting heights on text-containing elements, and apparently still has not learned anything about the fundamental structure of an HTML page, and, from the most recent posts, still hasn't got a grasp on how to apply CSS.
A couple of threads ago it was recommended that the OP just simply stop working on the site and take the HTML and CSS courses available from W3C to gain some understanding of what she was doing, to which she replied that she was "on it." Apparently the meaning of that expression has changed. I thought it carried the meaning of "understood, will comply" (kinda like "wilco" in a previous generation). Now it seems to mean instead, "I hear you, but I think I'll just carry on in ignorance," at least in the current context.
And tell me, how do you handle the contention that that butt-ugly slider is "... aesthetically pleasing to the eye?" Oh, well, I suppose that if beauty is in the eye of the beholder, then so is ugliness...
cheers,
scott
You really are a meanie.
And you are alone in your opinion that my slider is ugly.
Seeing as this is the very first site I'm attempting to make- with no background whatsoever in web design- I'm pretty proud of myself.
I will now be gone for a day or so to see where I'm going wrong- and to retake the online courses you have suggested.And you are alone in your opinion that my slider is ugly.
No he's not. I'm trying to be polite, realizing that design is subjective, but I share his opinion. Feel free to design it the way you want, but have no illusion that everyone else agrees with you.
JimAnd you are alone in your opinion that my slider is ugly.
Seeing as this is the very first site I'm attempting to make- with no background whatsoever in web design- I'm pretty proud of myself.
You should be proud what you have done but your slider is not 'visually pleasant'. Below is a list I compiled of better sliders that will give you a better look and possibly provide more functionality.
Check out these sliders:
http://docs.jquery.com/UI/Slider
http://flowplayer.org/tools/scrollable.html
http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html
--
Chris Hanscom - Microsoft MVP
Veign on Facebook | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- I won't weigh in on the subjective issue of the look of the slider, but I will ask the OP to step back, and in addition to learning more about CSS, to follow the following guidelines:
Start fresh.
Put ONE thing on your page. Preview it in ALL the browsers you will support, including zooming and text size changes.
If it doesn't look right in one or more browsers, figure out how to correct that (preferably with a fix that works in all browsers, not a browser-specific style sheet) before adding a single additional thing to the page.
Repeat, one item at at time, previewing in all browsers after each change.
The time you spend adding elements one at at time, previewing after each one, and correcting things for all browsers before continuing on, may sound tedious. But it is a LOT faster, at the end of the day, than the method you have been using.
Once you really, really know what you are doing, you'll be able to preview less fequently. But it will still be a good idea to preview more frequently than you think you need to, so you will not have to undo many things to get back to a working design.
