Problem of text alignments: different views on IE and Firefox?

Discussion in 'CSS' started by UAA, Sep 25, 2012.

  1. #1
    Hello Guys,

    I am working on a simple web page by using bluevoda builder it's a wysiwyg program. On my previews on IE and live views on IE everything is ok. After I uploaded related html files to my host I realized that on IE everything is ok, but when I use Mozilla Firefox some of the text alignment is corrupted. How can I solve this issue, for your consideration related link is: link

    thanks in advance
     
    UAA, Sep 25, 2012 IP
  2. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Two things:

    
    body,div.whatever {background:#fff; color:#000;}
    
    Code (markup):
    Once this is done...;)

    I don't know. For what it's worth, it looks OK in chrome. The code is a MESS! But that's WYSIWIG for ya. Even calling it 'mess' in big bold capital letters wouldn't do it justice. It's really a nightmare in there! Probably due to one of the many fixed-height (in pixel) div containers.

    Another thing I noticed, your WYSIWIG editor is still spitting out <font> tags. So, updating to a WYSIWIG editor published in the past decade or so may at least get rid of the browser issues you are seeing. But you're better off learning some simple HTML, because it won't take a lot to accomplish this by hand.
     
    HBz, Sep 25, 2012 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    HBZ is quite correct on the code being a mess -- but you said that in your first sentence:

    WYSIWYGS by definition generate absolute rubbish code that's inaccessible, non-semantic, bloated, slow, and completely broken across browsers. PERIOD! Anyone telling you otherwise is packing you so full of sand you could change your name to Sahara.

    From the MULTIPLE doctypes, static CSS in the markup, multiple STYLE tags doing the job of one, HTML 3.2 markup, presence of tags that have ZERO business being used in the generation of a website any time after 1997, and so much presentational markup one has to wonder what in blazes it's even using CSS for -- It's even trying to use windows-1252 character encoding which is was never meant to be used on websites in the first place! You have such a massive train wreck of gibberish HTML the only sane advice is to throw it ALL away, and start over with semantic markup, separation of presentation from content, and MODERN coding techniques.

    As it sits, to even TRY to get it working properly cross browser I'd have to throw it ALL away.

    Lemme put it this way -- there is little reason for the HTML of that page to be much more than:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Java Programlama
    </title>
    
    </head><body>
    	
    <div id="pageWrapper">
    	
    	<h1>
    		<span>Java<span></span> Programlama
    		<small>
    			Hizli ve Etkili Java Programlama Çözümleri... 
    		</small>
    	</h1>
    	
    	<div id="columnWrapper">
    	
    		<div id="fauxColumn"></div>
    	
    		<div id="contentWrapper"><div id="content">
    			<h2>Sunulan Hizmetler</h2>
    			<p>
    				<strong>&gt; Java Programlama</strong> - ilgili ana basliklar asagidaki gibidir, detayli bilgi için asagidaki linklerin üstünü tiklayin.
    			</p>
    			<ol>
    				<li>
    					<a href="/java-programlama-sunulan-hizmetler/java-programlamaya-giris/">
    						Java Fundemantels of Programming
    					</a> (Java Temelleri Programlama)
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-nesneye-yonelik-programlama/">
    						Java Object Oriented Programming
    					</a> (Java Nesneye Yönelik Programlama)
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-gui-programlama/">
    						Java GUI Programming
    					</a> ( Java Arayüz Programlama)
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-istisnalar-exceptions-io-recursion-programlama/">
    						Java Exception Handling - I/O - Recursion
    					</a> ( Java Istisnalar - I/O - Özyineleme)
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-veri-yapilari-data-structures-programlama/">
    						Java Data Structures
    					</a> ( Java Veri Yapilari Programlama)
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-concurrency-networking-internationalization-thread-socket-programlama/">
    						Java Concurrency / Networking / Internationalization
    					</a> ( Ileri Java )
    				</li><li>
    					<a href="/java-programlama-sunulan-hizmetler/java-uygulamalari-programlama/">
    						Diger Java Uygulamalari
    					</a> ( Sirketlere ve Akademisyenlere Özel Programlama )
    				</li>
    			</ol>
    			<p>
    				<strong>gt; Java Özel Ders</strong> - Yukaridaki ana basliklara ait konular ve de talepleriniz dogrultusunda konular için özel ders hizmeti verilmektedir. Detayli bilgi için 
    				<a href="/java-programlama-sunulan-hizmetler/java-ozel-ders/">burayi tiklayin</a>.
    			</p><p>
    				<strong>&gt; Java Programlama Danismanligi</strong> - Projeleriniz için teknik ve fonksiyonel danismanlik. Projelerinizin yapilabilirligi ve projelerinizi yapmaniz için kullanilacak teknolojilere yönelik danismanlik ve yardim.
    			</p><p>
    				<strong>&gt; Java Proje Destek - Projenize ait UML diyagramlari, Flow (akis) Diyagramlari , sunumlar ve raporlarin hazirlanmasi.
    			</p>
    		<!-- #content, #contentWrapper --></div>
    		
    		<hr />
    		
    		<div id="sidebar">
    			<ul id="mainMenu">
    				<li>
    					&gt;
    					<a href="/">
    						Ana Sayfa
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-sunulan-hizmetler/" class="current">
    						Sunulan Hizmetler
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-vizyon/">
    						Vizyon
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-misyon/">
    						Misyon
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-sikca-sorulan-sorular/">
    						Sikça Sorulan Sorular
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-ucretlendirme-fiyat/">
    						Ücretlendirme
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-iletisim/">
    						Iletisim
    					</a>
    				</li><li>
    					&gt;
    					<a href="/java-programlama-hakkimizda/">
    						Hakkimizda
    					</a>
    				</li>
    			</ul>
    		<!-- #sidebar --></div>
    		
    	<!-- #columnWrapper --></div>
    	
    	<hr />
    	
    	<div id="footer">
    		&copy; 2012<br />
    		<i>Ugur Alper AYDIN</i><br />
    		<b>alper</b>[at]<b>javaac</b>[dot]<b>com</b>
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Code (markup):
    EVERYTHING else being done there belongs in an external stylesheet.

    Though my command of whatever language that is fails me -- so the LANG and XML:LANG attributes should be changed to match that, and I'm not entirely sure if that's two lists or one, or if those should be H3 instead of STRONG... Generally speaking though, that's it, all it needs for markup... which is roughly one THIRD what that pile of dung WYSIWYG saddled you with. Admittedly it'll need about 3 to 4k of CSS to go with it, but that's still two-thirds total... and would be far, far, FAR easier to work with.

    I've never seen a WYSIWYG that made a website worth a damn.

    Of course, all that doesn't even address the illegible use of red on blue, the inaccessible fixed metric fonts, the fixed width for no good reason other than pissing all over accessibility, etc, etc, etc...
     
    deathshadow, Sep 25, 2012 IP