Jump to content
Sign in to follow this  
Bruno

Small web-design problem

Recommended Posts

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 B) )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: :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 !:rolleyes: Bruno

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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 B) . . but only the placement of the box is important ):sweatingbullets: Bruno

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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. B)

Share this post


Link to post
Share on other sites
Bruno

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

Share this post


Link to post
Share on other sites
ross549
tables.jpgUsing 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. B)

Share this post


Link to post
Share on other sites
Jeber
What is up with IE ???
Like you really have to ask?OK, let's see...where do I start?............. B)

Share this post


Link to post
Share on other sites
Bruno
tables.jpgUsing 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. :sweatingbullets:
Done !! . . . is it better now ???:sweatingbullets: BrunoJeber: . . Don get me started B) . . . . can you imagine me worring how my site looks in IE ?? How does that make me look . . . . . ??

Share this post


Link to post
Share on other sites
ross549

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

Share this post


Link to post
Share on other sites
Bruno

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

Share this post


Link to post
Share on other sites
striker

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

Share this post


Link to post
Share on other sites
ross549

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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. B)

Edited by ross549

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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. B)
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 . . B) Bruno

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
teacher

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Bruno

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

Share this post


Link to post
Share on other sites
teacher

By jove you have it B)

Share this post


Link to post
Share on other sites
Ed_P

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

Share this post


Link to post
Share on other sites
Bruno

HURRAY !!:D BrunoPS: Bedankt Striker . . . . . B) !

Share this post


Link to post
Share on other sites
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" . . . . . B) Bruno

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...