NuvoForum LeaderVPS - Virtual Prince of the Server
Internet Explorer has very poor support for W3C standards and it often means that you need to use some simple hacks to get around things.
If you're using floated divs instead of tables, you might find that it does look a bit iffy in IE but it'll be fine in other browsers.
The easiest way to fix this is to modify the floated div so that instead of looking like:
[html]<div class="myclass">[contents]</div>[/html]
It looks like:
[html]<div class="myclass" style="display: inline;">[contents]</div>[/html]
For some reason, you need to set it's display property to inline in order for it to work with IE as it should.
This doesn't break your code at all, so you don't have to worry about messing up your code so much
If that doesn't help, I'd suggest looking on google for sites like http://www.positioniseverything.net/ (poorly designed, but has a good number of browser bugs listed and how to get around them).
PHP, CSS, XHTML, Delphi, Ruby on Rails & more. Current project: CMS Object. Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in. Release date: NEVER!!!
looks fine in firefox but in ie everything is on the left hand side instead of center of page. and if i set the display to inline then in ie it stays the same but in firefox it throws everything off...
The Royal Ram
NuvoForum LeaderVPS - Virtual Prince of the Server
Oh... I think I see what you're trying to do now
If you want to center a site, you should use position: absolute; since position: relative; only positions things relative to their origional place within the document.
For example, if you had a site that was something like 622 pixels wide, you would do something like this:
.container {
position: absolute; /* Absolute positioning lets you place the element almost anywhere you like */
left: 20%; /* Guess work to nudge it into the middle... */
right: 25%; /* More guess work... not essential, but I did it anyway! */
top: 5px; /* Nudge it down by 5 pixels... not required but this is stolen from something I was coding :] */
width: 622px; /* I know it's this wide because my banner / logo is this wide. */
}
You should be able to center your template with absolute positioning, but don't use it for content inside a div or other html element since it won't work in any browser.
In those situations, you'd use relative positioning.
PHP, CSS, XHTML, Delphi, Ruby on Rails & more. Current project: CMS Object. Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in. Release date: NEVER!!!
Also on the right hand side of the header there is a small gap about 1 px where it isnt right up against the container. only shows in firefox... if i set it to left: 1px; then it takes away the gap in ff but in ie the gap appears...
The Royal Ram
NuvoForum LeaderVPS - Virtual Prince of the Server
I don't know really.
If you used pixel widths, you'd be really stuck since you'd have to know what resolution the user had in order to tell how many pixels in width theier system was set to.
If you were using fluid design (a design that can stretch and squash to fit the size of the window it's viewed in), you'd have less guess work since all you'd have to do is subtract the width (lets say it's 50%) from 100 and then divide what's left by 2... something like:
(100 - 50) / 2 = 25 (or 100 - 50 = 50, 50 / 2 = 25).
If you're going to have a border of any width, you should take into account that it may slightly change things since you're adding usually to the width of the item you're adding it to.
You only really need to know the left percentage really with fixed width templates since the right percentage can't effect the width like it can with fluid templates, but I just put it in just in case
PHP, CSS, XHTML, Delphi, Ruby on Rails & more. Current project: CMS Object. Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in. Release date: NEVER!!!
You don't need to use absolute positions (I usually find that using absolute positions makes it even harder to accomplish cross-browser accessibility).
The centering problem is just because IE doesn't know what 'auto' means with 'margin'. You need to have one wrapper div that has a width of 100%, but with 'text-align' to center -- this will center the content within with IE. Then another wrapper the sets the width of your page, and resets 'text-align' to left.
Their are different CSS tags for both IE and Firefox, esspecially IE7.x is very vulnerable for CSS. Try to make a textbox and resize it using standard methods, you'll see the difference
Python
Forum LeaderThe Royal RAM
Comments
If you're using floated divs instead of tables, you might find that it does look a bit iffy in IE but it'll be fine in other browsers.
The easiest way to fix this is to modify the floated div so that instead of looking like:
[html]<div class="myclass">[contents]</div>[/html]
It looks like:
[html]<div class="myclass" style="display: inline;">[contents]</div>[/html]
For some reason, you need to set it's display property to inline in order for it to work with IE as it should.
This doesn't break your code at all, so you don't have to worry about messing up your code so much
If that doesn't help, I'd suggest looking on google for sites like http://www.positioniseverything.net/ (poorly designed, but has a good number of browser bugs listed and how to get around them).
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
Ive got in the style:
[HTML]div.container
{
position:relative;
width: 760px;
height: 100%;
border-left: 0.5px solid #999999;
border-right: 0.5px solid #999999;
background-color: white;
margin-left: auto;
margin-right: auto;
}
div.header
{
width: 760px;
height: 60px;
background-image: url(templates/images/header_bg.jpg);
background-repeat: x;
margin-left: auto;
}[/HTML]
Then [HTML]<div class="container">
<div class="header">
<a href="index.php"><img src="templates/images/logo.jpg" border="0"></a>
</div>
</div>[/HTML]
looks fine in firefox but in ie everything is on the left hand side instead of center of page. and if i set the display to inline then in ie it stays the same but in firefox it throws everything off...
The Royal Ram
If you want to center a site, you should use position: absolute; since position: relative; only positions things relative to their origional place within the document.
For example, if you had a site that was something like 622 pixels wide, you would do something like this:
You should be able to center your template with absolute positioning, but don't use it for content inside a div or other html element since it won't work in any browser.
In those situations, you'd use relative positioning.
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
Is there a better way than just guessing the left and right percentages?
The Royal Ram
The Royal Ram
If you used pixel widths, you'd be really stuck since you'd have to know what resolution the user had in order to tell how many pixels in width theier system was set to.
If you were using fluid design (a design that can stretch and squash to fit the size of the window it's viewed in), you'd have less guess work since all you'd have to do is subtract the width (lets say it's 50%) from 100 and then divide what's left by 2... something like:
(100 - 50) / 2 = 25 (or 100 - 50 = 50, 50 / 2 = 25).
If you're going to have a border of any width, you should take into account that it may slightly change things since you're adding usually to the width of the item you're adding it to.
You only really need to know the left percentage really with fixed width templates since the right percentage can't effect the width like it can with fluid templates, but I just put it in just in case
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
Its annoying... IE cant use 0.5px borders
Positioning in CSS is really annoying...
The Royal Ram
The centering problem is just because IE doesn't know what 'auto' means with 'margin'. You need to have one wrapper div that has a width of 100%, but with 'text-align' to center -- this will center the content within with IE. Then another wrapper the sets the width of your page, and resets 'text-align' to left.
Webmaster-Talk.com
Chroder.com
Didnt think of that. Thanks
The Royal Ram
for those who are very good at css, they'll probably prefer ff...