WordPress.org

Ready to get started?Download WordPress

Forums

Explorer displays my page awfully!! (12 posts)

  1. cocopops
    Member
    Posted 4 years ago #

    Hello!!

    I have this wordpress page http://www.haningedansstudio.se. It looks good in firefox, but explorer displays it completely different =(. How do i go about and solving this problem?

    http://i736.photobucket.com/albums/xx3/cocopopsgstyle/screenshot.jpg

    that is how it looks. The header is divided into 2 pictures (right and left which is a gif slideshow). The right picture is displayed BENEATH the left one in explorer?! And EVERYTHING is moved to the LEFT when it should be centered. Etc etc.

    Please help me out

    thanks alot

  2. randinicole
    Member
    Posted 4 years ago #

    Validating your HTML goes a long way, there are 39 errors and 31 warnings. And it is not that it is divided into 2 pictures, its that there are 2 pictures in the header and your positioning seems to be off and IE is pushing one picture down. IE and FIREFOX work differently. Try clearing up the errors and see if that helps any.

    http://validator.w3.org/check?uri=http%3A%2F%2Fhaningedansstudio.se%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  3. cocopops
    Member
    Posted 4 years ago #

    ill do so!! thanks! =)

  4. cocopops
    Member
    Posted 4 years ago #

    well, i have fixed the CSS problems (there were like 40 problems; RESOLVED). now theres some HTML validation errors, but nothing really that should affect the OUTPUT of the webpage. ive scrolled through all the errors and most of them are just misinterpreted.

    what can be the issue? i really dont understand, thanks for all help

  5. randinicole
    Member
    Posted 4 years ago #

    You should really fix the html errrors, but can you paste your header code and i will take a look at it.

  6. cocopops
    Member
    Posted 4 years ago #

    <!DOCTYPE html>
    <html <?php language_attributes() ?> >
    <?php $options = get_option('aesthete_options'); ?>
    <head>
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php if (is_home () ) { bloginfo('name'); echo ' - '; bloginfo('description');}
    	elseif ( is_category() ) {single_cat_title(); echo ' - ' ; bloginfo('name'); }
    	elseif (is_single() ) { single_post_title(); echo ' - '. get_tags_for_post($post->ID, 'category' ).' - '. get_tags_for_post($post->ID). ' - ' ; bloginfo('name');}
    	elseif (is_page() ) { single_post_title();}
    	elseif(is_tag()) {echo 'Post tagged '; wp_title('',true); echo ' - '; bloginfo('name');}
    	else { wp_title('',true); } ?></title>
    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<?php if (is_single())
    	{?>
    		<meta name="description" content="<?php single_post_title();?> <?php echo ' - '.get_the_excerpt() . '.' . get_tags_for_post($post->ID, 'category' )?>" />
    		<meta name="keywords" content="<?php echo get_tags_for_post($post->ID, 'category' ). get_tags_for_post($post->ID)?>" />
    	<?php }
    	elseif (is_category())
    	{?>
    			<meta name="description" content="<?php single_cat_title(); echo ', '; bloginfo('description');?>" />
    			<meta name="keywords" content="<?php single_cat_title(); echo ' '; bloginfo('description');?>" />
    	<?php
    	}
    	else
    	{?>
    			<meta name="description" content="<?php bloginfo('name'); echo '. '; bloginfo('description');?>" />
    			<meta name="keywords" content="<?php bloginfo('name'); echo ' '; bloginfo('description');?>" />
    	<?php }?>
    
    	<style type="text/css" media="screen">
    		@import url( <?php bloginfo('stylesheet_url'); ?> );
    	</style>
    
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    	<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/base64.js"></script>
    
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' );?>
    	<?php wp_enqueue_script('jquery'); ?>
    	<?php wp_head(); ?>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
      jQuery('#toggle-text1').hide();
    
     // toggles the slickbox on clicking the noted link
      jQuery('a#slick-slidetoggle1').click(function() {
    	jQuery('#toggle-text1').slideToggle(400);
    	return false;
      });
    });
    </script>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
      jQuery('#toggle-text2').hide();
    
     // toggles the slickbox on clicking the noted link
      jQuery('a#slick-slidetoggle2').click(function() {
    	jQuery('#toggle-text2').slideToggle(400);
    	return false;
      });
    });
    </script>
    
    </head>
    
    <body>
    <div id="page">
    	<div id="wrapper">
    		<?php if ($options['use_graph_header']):?>
    			<div id="header">
    				<a href="<?php echo get_option('home'); ?>">
    						<img src="<?php bloginfo('stylesheet_directory');?>/img/head-b.jpg" width="683" height="177" border="0"/><img src="<?php bloginfo('stylesheet_directory');?>/img/logo.gif" width="239" height="177" border="0"/>
    				</a>
    			</div>
    		<?php else:?>
    			<div id="header">
    
    				<a href="<?php echo get_option('home'); ?>" class="headerimg" style="width:<?php echo $options['header_image_width']?>px;">
    
    					<?php if ($options['header_image']==3 && $options['image_url']):?>
    						<img src="<?php echo $options['image_url']?>" border="0" class="headerimg"/>
    					<?php elseif($options['header_image']==1):?>
    						<img src="<?php bloginfo('stylesheet_directory');?>/img/headerslide.gif" width="450" height="262" border="0" class="headerimg" />
    
    					<?php endif;?>
    				</a>
    				<img src="<?php bloginfo('stylesheet_directory');?>/img/logga5.jpg" width="519" height="232" border="0" class="headerright" />
    				<?php if (!$options['hide_blog_title']):?>
    					<div class="headerimg"  style="padding-top:<?php $pad=max(0,$options['header_image_height']-97); echo $pad;?>px">
    						<?php if (is_home()):?>
    							<h1 <?php if ($options['blog_title_size']) echo 'style="font-size:'.$options['blog_title_size'].'px"'?>><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    						<?php else:?>
    							<h3 <?php if ($options['blog_title_size']) echo 'style="font-size:'.$options['blog_title_size'].'px"'?>><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h3>
    						<?php endif;?>
    							<div class="description"><?php bloginfo('description'); ?></div>
    					</div>
    				<?php endif; ?>
    				<div class="clear"></div>
    			</div>
    		<?php endif;?>
    
    		<div id="whitepage">
    			<div id="whitepagesidebg">
    				<div id="whitepagetopbg">
    					<div id="whitepagebottombg">
    						<div id="navdiv">
    						<ul id="nav">
    			<?php /*?><li <?php if(!is_page()) echo 'class="current_page_item"'; ?>><a href="<?php echo get_option('home'); ?>/"><?php _e('Home');?></a></li><?php */?>
    			<?php wp_list_pages('title_li=&exclude=65,137,168,169,173,235,238'); ?>
    						</ul>
    						<div class="clear"></div>
    						</div>
    <?php 
    
    ?>
    
    <!-- end header -->
  7. randinicole
    Member
    Posted 4 years ago #

    Here is a quick fix........

    get rid of the logo and replace your header css with this. It pushes the logo to a background element and leaves the gif in place

    #header {
    margin : 0;
    margin-top : 40px;
    padding : 0 0 9px 0;
    background : url(http://haningedansstudio.se/wp-content/themes/aesthete.1.1.4/aesthete/img/nylogo.jpg) no-repeat;
    background-position:100% 10%;
    }
  8. cocopops
    Member
    Posted 4 years ago #

    ooooooooh!!!!!!!! THAAANK YOU!!!!! WOW!!

    do u see the problem when u go to "kurser/schema" ??? it should be three images (kids, youth and adults) and beneath each of them the picture of the schedule, like three columns. whats up with that???

  9. randinicole
    Member
    Posted 4 years ago #

    Change the width of the leftcontent div.

    this code should work, just replace again.

    #leftcontent {
    display : inline;
    margin : 28px 10px 10px 20px;
    padding : 0 10px 5px 0;
    width : 990px;
    float : left;
    border-bottom : 1px dotted #000000;
    }
  10. cocopops
    Member
    Posted 4 years ago #

    but then the border-bottom dotted extends as well, goin outside of the main-border

  11. randinicole
    Member
    Posted 4 years ago #

    Would help if I could view the site live to see what you are talking about now =\ I am sure that width can be modified a few pixels give or take.

  12. johnrayhan
    Member
    Posted 3 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic