Small web-design problem

[Bruno]

Hello website-designers . . . . . . I need some help here.I have a google searchbox on my site and in every browser, Linux or Windows it is nicely centered on the page.In Firefox ( Windows ) it is centeredIn Firefox ( Linux ) it is centeredIn Galeon ( Linux ) it is centeredIn Konqueror ( Linux ) it is centeredIn Mozilla ( Linux ) it is centeredIn Firefox ( Linux ) it is centeredOnly in Internet Explorer it is alligned to the left . . . . . now that is not really a big deal . . who wants to use Internet Explorer anyway . . . but still it bugs me terribly. ( Driving me nuts )Here is the code I use:

<!================= SiteSearch Google ==================><!---http://www.digitalpoint.com/tools/search/--><!-- SiteSearch Google --><form method="get" action="http://www.google.com/custom">  <div style="margin-left: auto; margin-right: auto;"><br>  </div>  <br>  <table style="text-align: center; margin-left: auto; margin-right: auto; width: 440px; height: 64px;" bgcolor="#eeeeee">    <tbody>      <tr>        <td style="text-align: center;" height="32" nowrap="nowrap" valign="top"><!--==== Google logo ====--><! NOTE: I took out the google logo;-) ><!--==== Google logo ====--> <br>        </td>        <td><input name="domains" value="www.brunolinux.com" type="hidden"><input name="q" size="31" maxlength="255" value="" type="text"><input name="sa" value="Go" type="submit"></td>      </tr>      <tr>        <td style="text-align: center;"> </td>        <td><font size="-1"><input name="sitesearch" value="" type="radio"> Google  <input name="sitesearch" value="www.brunolinux.com" checked="checked" type="radio">www.brunolinux.com            <br>        </font><input name="client" value="pub-5676236325709660" type="hidden"><input name="forid" value="1" type="hidden"><input name="channel" value="7882517130" type="hidden"><input name="ie" value="UTF-8" type="hidden"><input name="oe" value="UTF-8" type="hidden"><input name="cof"<! ======= NOTE: the next 2 lines was 1 line ======== > value="GALT:#008000;GL:1;DIV:#FFFFFF;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"<! ======= NOTE: the 2 lines above was 1 line ======== > type="hidden"><input name="hl" value="en" type="hidden"></td>      </tr>    </tbody>  </table></form><!================= SiteSearch Google ==================>

Now . . if changing this will mess up the view in my Linux browsers, I'd rather keep it like this, because only 10% of my visitors use Internet Explorer ( and they can't be the smartest if they still do so :sweatingbullets: )But . . if changing this will give a nice uniform view in all browsers: why not meet the IE users half way . . . maybe they might want to run Linux after they visited my site . . . :w00t:In case you still are unaware of the URL of my site: http://www.brunolinux.com ;)Thanks a bundle ! Bruno

[ross549]

<td><input name="domains" value="www.brunolinux.com"type="hidden"><input name="q" size="31" maxlength="255" value=""type="text"><input name="sa" value="Go" type="submit"></td>

Have you tried modifying the first td tag to

<td align="center"><input name="domains" value="www.brunolinux.com"type="hidden"><input name="q" size="31" maxlength="255" value=""type="text"><input name="sa" value="Go" type="submit"></td>

[Bruno]

Thanks AdamLooks okay in Linux . . but can you check it in IE ?http://www.brunolinux.com/div/IE-index.html( This page has no pictures because they link internally to another place . . but only the placement of the box is important ) Bruno

[striker]

no good in IE 6SP1 Bruno,OK in Opera 7.54,OK in Firefox 1.0OK in Mozilla 1.73 ... all on windows xp pro.

[Jeber]

It's not quite left justified now in IE, but only by an inch or so. It's still not as centered as it is in Firefox, et. al.

[Bruno]

Thanks Striker and Jeber . . . . . so that still gives no good result . . . What is up with IE ??? Bruno

[ross549]

Using the web developer plugin for firefox, I was able to display the table structure of the page, and this is what I got.You might want to remove the two cells on the left.

[Jeber]

What is up with IE ???

Like you really have to ask?OK, let's see...where do I start?.............

[Bruno]

Using the web developer plugin for firefox, I was able to display the table structure of the page, and this is what I got.You might want to remove the two cells on the left.

Done !! . . . is it better now ??? BrunoJeber: . . Don get me started . . . . can you imagine me worring how my site looks in IE ?? How does that make me look . . . . . ??

[ross549]

Yep, the empty cells are gone now......

[Bruno]

If now only the people with IE had a look if that did any good . . . BrunoPS: I use the Mozilla Composer . . . . . . geat tool

[striker]

Bruno, I think I've got it, give me a few minutes to test and sort it out....

[ross549]

Yes it is.......I would also suggest changing the table properties to make it 100% wide. That might solve the alignment issue.

[Bruno]

Yes it is.......I would also suggest changing the table properties to make it 100% wide. That might solve the alignment issue.

But, Adam, I don't want it 100% wide . . . . :(Striker: Take your time . . . . . I am in no hurry at allB) Bruno

[ross549]

Any particular reason why? No one can see them......... :unsure:I would certainly solve the alignment issue, and would not affect the Gecko browsers.EDIT: out to meet with some friends... will check back on it later.

Edited December 7, 2004 by ross549

[striker]

Bruno,I was able to center it in all browsers, but there were some side effects you certainly don't want. It's getting late here but I plan to experiment a little more tomorrow.I'll let you know if it gets any better, unless someone of the real masters come up with a solution.

[Bruno]

Any particular reason why? No one can see them......... :unsure:I would certainly solve the alignment issue, and would not affect the Gecko browsers.EDIT: out to meet with some friends... will check back on it later.

Hi Ross . . I tried it here:http://www.brunolinux.com/div/IE-index-2.htmlBut it gets problems when you resize the window . . . not really nice that way . . Bruno

[Bruno]

Bruno,I was able to center it in all browsers, but there were some side effects you certainly don't want. It's getting late here but I plan to experiment a little more tomorrow.I'll let you know if it gets any better, unless someone of the real masters come up with a solution.

It is getting late here to . . and I will leave at that for today . . . thanks for your help Striker . . we will see if there are better alternatives tomorrow . . :DB) Bruno

[striker]

But it gets problems when you resize the window . . . not really nice that way . .

Well I'll be d****, that's the same I've got ! Will try again tomorrow.

[ross549]

<table style="text-align: center; margin-left: auto; margin-right: auto; width: 972px; height: 64px;" bgcolor="#eeeeee">

There is the problem... you specified a pixel width for the table...... You need to specify a percentage, so it scales with the window. My site does this all over. I would suggest changing 972px to 100% and see what happens. I am not sure what will happen, because you have the style of the table defined as a style, instead of using something like

<table width="100%">

It may work, it may not. I do not know for sure.

[teacher]

 style="text-align: center; margin-left: auto; margin-right: auto; width: auto; height: 64px;">    <tbody>

You have to change the width to auto or to percentage for the table. As long as you leave it as a pixel it will be offset.

[teacher]

I tested it the way I posted above in both IE and Firefox. It works both ways like that.

[Bruno]

Thanks Julia . . . So basically this should do it ?:http://www.brunolinux.com/div/Julia-index.htmlI now see another problem with IE though ( only with monitors > 800x600 ). . . . . At the very top and bottom of all ( 183 ) pages there are links placed in a gray line . . . that one should be centered too like it does in every "normal" browser . . . here again IE fails the test.I am thinking of putting up a disclaimer on my site "These pages are best viewed in non-MS browsers" . . . or even better: Remember the messages you get on some sites that you need Internet Explorer to see the site when you visit them with FF ? What would be the code that would present - to the IE users only - the message: "This page does not display well in IE, please get a real browser HERE ( and the HERE links to http://www.mozilla.org/products/firefox/ ) or, of course, switch to Linux" Bruno

[Ed_P]

Well, on my Windows XP system the Google box on teacher's version of the page looks as follows;Netscape 7.2 - centeredIE 6.x - left aligned Netscape Browser: Netscape view - centeredNetscape Browser: IE view - left aligned

[teacher]

<form method="get" action="http://www.google.com/custom">  <div style="margin-left: auto; margin-right: auto;"><br>  </div>  <br>  <table width="100%" bgcolor="#eeeeee" style="text-align: center; margin-left: auto; margin-right: auto; width: auto; height: 64px;">    <tbody>

It looks like we need to make one other change. Look up at the top where it has the table width. That needs to be changed to 100% instead of auto.

[Bruno]

I think the problem of the box is solved now:http://www.brunolinux.comStriker came up with a solution . . . Bruno

[teacher]

By jove you have it

[Ed_P]

Consistent presentation in all views here also.By jove, another success story.

[Bruno]

HURRAY !! BrunoPS: Bedankt Striker . . . . . !

[Bruno]

Thanks to everybody that helped ! . . You are great !Still . . if anybody knows the code that makes that only IE users will get a special message: "Download a real browser, get Firefox" . . . . . Bruno