Jump to content

Small web-design problem


Bruno

Recommended Posts

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

Link to comment
Share on other sites

  • Replies 60
  • Created
  • Last Reply

Top Posters In This Topic

  • Bruno

    24

  • teacher

    11

  • Ed_P

    7

  • striker

    7

Top Posters In This Topic

<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>

Link to comment
Share on other sites

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

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

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:

Link to comment
Share on other sites

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

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

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.

Link to comment
Share on other sites

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

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

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

<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.

Link to comment
Share on other sites

 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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...