Easy Question About Different Web Browsers

Reply

Join Date: Feb 2009
Posts: 15
Reputation: AGU.Jessica is an unknown quantity at this point 
Solved Threads: 0
AGU.Jessica's Avatar
AGU.Jessica AGU.Jessica is offline Offline
Newbie Poster

Easy Question About Different Web Browsers

 
0
  #1
Feb 12th, 2009
I created a web site using Frontpage.
Frontpage makes the code a complete mess, though.
My web site looks alright in IE - Everything is aligned correctly
But in Firefox it look hideous. My bottom line question is,
How do I go back into frontpage and design my website
in a firefox browser, and then add conditional comments?
Where do I add the conditional comments in the line of code?
Eh, even just a nice little link to a website that would
elaborate on how to go about this process would be so helpful.

Ps: If you can't tell, I've only been learning this for about a week
But I'm quick learner if I have the right people teaching me,
So please try not to discourage. I really appreciate it!!
Last edited by AGU.Jessica; Feb 12th, 2009 at 2:00 pm.
Reply With Quote Quick reply to this message  
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Easy Question About Different Web Browsers

 
0
  #2
Feb 12th, 2009
Originally Posted by AGU.Jessica View Post
I created a web site using Frontpage.
Frontpage makes the code a complete mess, though.
My web site looks alright in IE - Everything is aligned correctly
But in Firefox it look hideous. My bottom line question is,
How do I go back into frontpage and design my website
in a firefox browser, and then add conditional comments?
Where do I add the conditional comments in the line of code?
Eh, even just a nice little link to a website that would
elaborate on how to go about this process would be so helpful.

Ps: If you can't tell, I've only been learning this for about a week
But I'm quick learner if I have the right people teaching me,
So please try not to discourage. I really appreciate it!!
hey

your problem is your using frontpage, ie and frontpage are both microsoft so thats why it works on ie. in the web industry you code for firefox and safari and tweak for ie if necessary but using conditional stylesheets and hacks is bad practice. post your code or a link to your site and well get you started.
Reply With Quote Quick reply to this message  
Join Date: Jan 2009
Posts: 1,349
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Easy Question About Different Web Browsers

 
0
  #3
Feb 12th, 2009
the code produced by frontpage looks hideous in IE too,
at any screen resolution other than the one it was developed at, or in a part screen window at the same resolution (try it).
all the fixed pixel divs and tables do not scale, do not adjust,
not the sort of thing to put out on the web as a first contact point.
would be better to use another page layout program.
even notepad and use browsers to preview the page,
If you must use frontpage don't wysiwyg.
use html view and change all the pixel measurements to something that will scale ems or %

Frontpage is MS,
it will do the job, but not well or fast, and not without a lot of tweaking,
the only benefit, it comes 'free' in Office
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Easy Question About Different Web Browsers

 
0
  #4
Feb 12th, 2009
Originally Posted by almostbob View Post
the code produced by frontpage looks hideous in IE too,
at any screen resolution other than the one it was developed at, or in a part screen window at the same resolution (try it).
all the fixed pixel divs and tables do not scale, do not adjust,
not the sort of thing to put out on the web as a first contact point.
would be better to use another page layout program.
even notepad and use browsers to preview the page,
If you must use frontpage don't wysiwyg.
use html view and change all the pixel measurements to something that will scale ems or %

Frontpage is MS,
it will do the job, but not well or fast, and not without a lot of tweaking,
the only benefit, it comes 'free' in Office
em and %'s arent good to use unless your site is completely expandable which is not common. fixed width divs are generally used.
Reply With Quote Quick reply to this message  
Join Date: Feb 2009
Posts: 15
Reputation: AGU.Jessica is an unknown quantity at this point 
Solved Threads: 0
AGU.Jessica's Avatar
AGU.Jessica AGU.Jessica is offline Offline
Newbie Poster

Re: Easy Question About Different Web Browsers

 
0
  #5
Feb 12th, 2009
Originally Posted by cmills83 View Post
hey

your problem is your using frontpage, ie and frontpage are both microsoft so thats why it works on ie. in the web industry you code for firefox and safari and tweak for ie if necessary but using conditional stylesheets and hacks is bad practice. post your code or a link to your site and well get you started.

Www.allgreenedup.net <-
I can give you the code if you perfer.
Which programs should I use to code it for firefox?
Why are conditional comments bad practice?
Reply With Quote Quick reply to this message  
Join Date: Jan 2009
Posts: 1,349
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Easy Question About Different Web Browsers

 
0
  #6
Feb 12th, 2009
Originally Posted by AGU.Jessica View Post
Why are conditional comments bad practice?
because the browser that requires the conditional comments is also changing, your site becomes invisible.

WYSIWYG editors, any of them, use so many kludges to adjust positioning, that they never work right.
Its usually easier faster and more standards compliant, to use a text editor to type what you want, and the view mode only to make sure its what you meant to type.
  1. <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
  2. <head>
  3. <meta http-equiv="Content-Language" content="en-us">
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <style>
  6. <!--
  7. -->
  8. </style>
  9. <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
  10. <meta http-equiv="Site-Exit" content="blendTrans(Duration=1.0)">
  11.  
  12. <link rel="File-List" href="index_files/filelist.xml">
  13.  
  14.  
  15. <script type="text/javascript" language="JavaScript1.2" src="_pgtres/stmenu.js"></script>
  16. <!--[if !mso]>
  17. <style>
  18. v\:* { behavior: url(#default#VML) }
  19. o\:* { behavior: url(#default#VML) }
  20. .shape { behavior: url(#default#VML) }
  21. </style>
  22. <![endif]--><!--[if gte mso 9]>
  23. <xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
  24. </xml><![endif]-->
  25. </head>
  26.  
  27. <body background="GOD1.jpg" marginwidth="1199" marginheight="965">
  28. <script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
  29. </body>
  30.  
  31. </html>
  32. <p align="center">&nbsp;</p>
  33. <p align="center">&nbsp;</p>
  34. <p align="center">&nbsp;</p>
  35. <p align="left">&nbsp;</p>
  36. <table border="0" width="1041" height="532">
  37. <tr>
  38. <td height="75" width="279">
  39. <div style="position: absolute; width: 873px; height: 5px; z-index: 1; left: 170px; top: 194px" id="layer1">
  40. &nbsp;<script type="text/javascript" language="JavaScript1.2">
  41. <!--
  42. stm_bm(["menu57e9",700,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","100%",67108897,0,1,2,"hand","hand",""],this);
  43. stm_bp("p0",[0,4,0,0,0,1,16,0,100,"",-2,"",-2,50,0,0,"#999999","#000000","",3,0,0,"#000000"]);
  44. stm_ai("p0i0",[0," Home","","",-1,-1,0,"index.htm","_self","","","towgreen-r.gif","towgreen-r.gif",16,9,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"1ab2.jpg","text_top_bckg.jpg",3,0,1,5,"#000000","#000000","#FFFFFF","#FFFFFF","bold 10pt Verdana","bold 10pt Verdana",0,0],121,41);
  45. stm_aix("p0i1","p0i0",[0," About Us!","","",-1,-1,0,"aboutus.htm"],121,41);
  46. stm_aix("p0i2","p0i0",[0,"Contact Us!","","",-1,-1,0,"contactus.htm"],121,41);
  47. stm_aix("p0i3","p0i0",[0,"Services","","",-1,-1,0,"services.htm","_self","","","towgreen-r.gif","towgreen-r.gif",-1,-1,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"1ab2.jpg","text_top_bckg.jpg",3,0,1,5,"#000000","#000000","#FFFFFF","#FFFFFF","bold 9pt Verdana","bold 9pt Verdana"],121,41);
  48. stm_aix("p0i4","p0i3",[0,"Eco-Friendly","","",-1,-1,0,"ecofriendlytech.htm"],121,41);
  49. stm_aix("p0i5","p0i3",[0,"Products","","",-1,-1,0,"products.htm","_self","","","towgreen-r.gif","towgreen-r.gif",16,9,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"1ab2.jpg","text_top_bckg.jpg",3,0,1,6],121,41);
  50. stm_ep();
  51. stm_em();
  52. //-->
  53. </script>
  54. </div>
  55. &nbsp;</td>
  56. <td height="77" width="697">&nbsp;</td>
  57. <td height="77" width="50">&nbsp;</td>
  58. </tr>
  59. <tr>
  60. <td height="447" width="279">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  61. <img border="0" src="matrix-05.gif" width="8" height="363"><p>&nbsp;</p>
  62. <p>&nbsp;</td>
  63. <td height="447" width="697">
  64. <!--[if gte vml 1]>
  65. <v:shapetype id="_x0000_t136"
  66. coordsize="21600,21600" o:spt="136" adj="10800" path="m@7,l@8,m@5,21600l@6,21600e">
  67. <v:formulas>
  68. <v:f eqn="sum #0 0 10800"/>
  69. <v:f eqn="prod #0 2 1"/>
  70. <v:f eqn="sum 21600 0 @1"/>
  71. <v:f eqn="sum 0 0 @2"/>
  72. <v:f eqn="sum 21600 0 @3"/>
  73. <v:f eqn="if @0 @3 0"/>
  74. <v:f eqn="if @0 21600 @1"/>
  75. <v:f eqn="if @0 0 @2"/>
  76. <v:f eqn="if @0 @4 21600"/>
  77. <v:f eqn="mid @5 @6"/>
  78. <v:f eqn="mid @8 @5"/>
  79. <v:f eqn="mid @7 @8"/>
  80. <v:f eqn="mid @6 @7"/>
  81. <v:f eqn="sum @6 0 @5"/>
  82. </v:formulas>
  83. <v:path textpathok="t" o:connecttype="custom" o:connectlocs="@9,0;@10,10800;@11,21600;@12,10800"
  84. o:connectangles="270,180,90,0"/>
  85. <v:textpath on="t" fitshape="t"/>
  86. <v:handles>
  87. <v:h position="#0,bottomRight" xrange="6629,14971"/>
  88. </v:handles>
  89. <o:lock v:ext="edit" text="t" shapetype="t"/>
  90. </v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t136" alt="Welcome!"
  91. style='width:66pt;height:11.25pt' stroked="f">
  92. <v:fill color2="#aaa" type="gradient"/>
  93. <v:shadow on="t" color="#4d4d4d" opacity="52429f" offset=",3pt"/>
  94. <v:textpath style='font-family:"Calibri";font-size:16pt;v-text-spacing:78650f;
  95. v-text-kern:t' trim="t" fitpath="t" string="Welcome!"/>
  96. </v:shape><![endif]--><![if !vml]><img border=0 width=91 height=19
  97. src="index_files/image001.gif" alt="Welcome!" v:shapes="_x0000_s1025"><![endif]><br>
  98. <br>
  99. <font size="4" color="#C0C0C0">All Greened Up</font><font color="#C0C0C0">
  100. provides you with top quality solution sets for your small business at
  101. incomparable prices!<br>
  102. We operate as fast &amp; efficient technicians who continue to provide you
  103. with honest customer service along the way. <br>
  104. Our team has more than 2 decades of experience in the&nbsp; LAN + WAN
  105. design, installation &amp; service.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>
  106. </font><br>
  107. <font size="4" color="#C0C0C0">Our company</font><font size="5" color="#FFFFFF">
  108. </font><font color="#C0C0C0">consistently contributes to the new development
  109. of services and products in the data networking &amp; telecommunication industries.&nbsp;
  110. Are services are the leading choice for hundreds of southern California
  111. based companies and our products are sold and supported world wide.<br>
  112. &nbsp;</font><p><font size="4" color="#C0C0C0">With our services</font><font color="#C0C0C0">
  113. you are able to seamlessly connect &amp; network your communications
  114. needs to
  115. anywhere in the world securely and with ease.&nbsp;
  116. So allow us take care of your full communication requirements, While you
  117. get the rewards!!<br>
  118. &nbsp;</font></p>
  119. <p align="center">&nbsp;</p>
  120. <p align="center">&nbsp;</p>
  121. <p align="center">&nbsp;</p>
  122. </td>
  123. <td height="447" width="50">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  124. <img border="0" src="matrix-05.gif" width="6" height="345"><p>&nbsp;</p>
  125. <p>&nbsp;</td>
  126. </tr>
  127. </table>
is utter garbage,
looking at just the last 10 lines,
in many browsers(all except IE) measurements without dimension are discarded <td height=447> is just <td> and the cell height adjusts to fit the contents, the layout ceases to exist,
In the code above, every element has some style or dimension added, done in a more standard compliant manner, the styles are defined in an external stylesheet and cached and only downloaded once, , or between <style></style> tags in the head, not dozens of times for every page.
<p align="center">&nbsp;</p> = [icode]<p></p> [icode]
tables are only used for tables, sets of numbers, they take too long to load.
In line 1: MICROSOFT schema - you wonder why it wont work right ion any non-MS browser, its coded not to.

I use notepad2 (a notepad replacement with code prompting syntax highlighting and error checking included to write the page, and have thumbdrive versions of Firefox Opera Maxthon safari avant installed in a sandbox to get the appearance right in as many browsers as possible. Its turned out much faster than debugging WYSIWYG crap code. you just tab through the browsers and refresh the page after edits to the source.

My kids use pagebreeze http://www.formbreeze.com/freehtmled...der_editor.htm
a combo wysiwyg/text editor that produces compliant code

hope it helps
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Join Date: May 2008
Posts: 174
Reputation: Jen0608 can only hope to improve 
Solved Threads: 10
Jen0608 Jen0608 is offline Offline
Posting Whiz

Re: Easy Question About Different Web Browsers

 
0
  #7
Feb 13th, 2009
how about trying using dreamweaver?
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Easy Question About Different Web Browsers

 
0
  #8
Feb 17th, 2009
I use notepad and write my own code.

The problems between the nonstandard IE and the standards-obeying browsers like Firefox are not easily fixed by using conditional styles.

They are easily fixed by not using size styles (width, height) in the same tags or styles with nonzero surrounding styles (margin, border, padding). IE nests styles these in the wrong order when applying them to the same tag.

The trick is nesting two tags, one with the size styles, and one with the surrounding styles, in the order you want them.

Here is a page with some tips for making compatible web pages.:

http://geocities.com/midimagic@sbcgl...et/webtips.htm
Last edited by MidiMagic; Feb 17th, 2009 at 7:28 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC