Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Footer issues in different browsers

Discussion in 'HTML & Website Design' started by imza86, Jun 8, 2017.

0
  1. #1
    This is my website http://www.noor-azmi.com/element/

    The footer looks right and good in firefox. Thats what i want.

    But if u look at it in chrome and IE, it is different. In different pages the footer will shift and not fixed.

    In IE the footer also is not fixed in the bottom, causing it to expose white BG below the image.

    Whats the issue ? Anyone can help?

    Thanks
     
    imza86, Jun 8, 2017 IP
  2. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    45
    #2
    I suggest for you to scrape the code and start over again...

    You are looking at the footer and you see something which you cannot explain while you miss to spot that your navbar is way too wide on higher resolution...
     
    Rokis, Jun 8, 2017 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,688
    Likes Received:
    1,988
    Best Answers:
    251
    Trophy Points:
    515
    #3
    You're closing </body> before your <footer>, do we see the problem with that? <footer> is a content bearing element, it goes INSIDE <body>, not after it!

    Though that's why I would pitch all the idiotic dumbass new HTML 5 asshattery -- HEADER, NAV, FOOTER, MAIN, SECTION, ASIDE and so forth in the trash and start over with ACTUAL semantic markup.

    See how you have this bloated mess of gibberish:

        </head>

    <body>
        <header>
             
    <nav class="navbar navbar-default ">
  <div class="container-fluid">
      <div class="header-sec">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <div class="logo2"><img src="image/Element-Design-logo.png"></div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="company.html">Our Company</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
      </div>
  </div><!-- /.container-fluid -->
</nav>
    
  
                
        </header>
<div class="container_fluid">
    <div class="fullslider">
            <div class="row">
            <div class="col-sm-12">
                
                <div id="my-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4000" data-pause="false" >
                    <!-- Indicator dots -->
                    <ol class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                        <li data-target="#my-slider" data-slide-to="1"></li>
                        <li data-target="#my-slider" data-slide-to="2"></li>
                        <li data-target="#my-slider" data-slide-to="3"></li>
                        <li data-target="#my-slider" data-slide-to="4"></li>
                        <li data-target="#my-slider" data-slide-to="5"></li>
                        <li data-target="#my-slider" data-slide-to="6"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="image/Slider_Images/pencil-banner.png" alt="slider1">
                            
                        </div>
                        
                        <div class="item">
                            <img src="image/Slider_Images/2FS_041817_APHR%20pool.png" alt="slider2">
                        </div>

                        <div class="item">
                            <img src="image/Slider_Images/3FS_041817_RB%20pool%20perspective.png" alt="slider3">
                        </div>    
                        
                        <div class="item">
                            <img src="image/Slider_Images/4FS_041817_WCR%20site%20plan.png" alt="slider4">
                        </div>
                        
                        <div class="item">
                            <img src="image/Slider_Images/5FS_041817_CPV%20pool.png" alt="slider5">
                        </div>
                        
                        <div class="item">
                            <img src="image/Slider_Images/6FS_041817_RPQ%20villa%20perspective.png" alt="slider6">
                        </div>
                    
                        
                        <div class="item">
                            <img src="image/Slider_Images/7FS_041817_Hresort%20villa%20nighttime.png" alt="slider7">
                        </div>
                        
                    </div>
    Code (markup):
    Doing the job of:

    </head><body>

<div id="top">

	<h1>
		Element <span>Design Studio</span><br>
		<small>Landscape Architecture</small>
	</h1>
	
	<input type="checkbox" id="mainMenuShowHide">
	<label for="mainMenuShowHide"></label>
	<ul id="mainMenu">
		<li><a href="index.html" class="current">Home</a></li>
		<li><a href="company.html">Our Company</a></li>
		<li><a href="projects.html">Projects</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>

<!-- #top --></div>

<div id="content">
	<div class="eFlipper" data-eFlipControls="all" data-eFlipDelay="4">
		<img src="image/Slider_Images/pencil-banner.png" alt="slider1">
		<img src="image/Slider_Images/2FS_041817_APHR%20pool.png" alt="slider2">
		<img src="image/Slider_Images/3FS_041817_RB%20pool%20perspective.png" alt="slider3">
		<img src="image/Slider_Images/4FS_041817_WCR%20site%20plan.png" alt="slider4">
		<img src="image/Slider_Images/5FS_041817_CPV%20pool.png" alt="slider5">
		<img src="image/Slider_Images/6FS_041817_RPQ%20villa%20perspective.png" alt="slider6">
		<img src="image/Slider_Images/7FS_041817_Hresort%20villa%20nighttime.png" alt="slider7">
    Code (markup):
    ... at least if the CSS and scripting being used were any good and did things like leverage CSS for the menu and generate the scripting only elements (like the image selection buttons) from the scripting so they aren't wasting people's time scripting off...

    NOT that I'd be wasting users time with those giant bloated slow loading images in the slideshow on a page utterly and completely lacking ACTUAL CONTENT, but hey, your funeral.

    Bottom line, CSS is only as good as the HTML it is applied to, and what you have for HTML is broken non-semantic gibberish wasting anywhere from three to four times the code such a simple page should be using; though that's entirely par for the course when mouth-breathing dumbass halfwit ignorant garbage like Bootcrap and jQuery are used to piss all over a page. I highly doubt that written 'properly' that page should be consuming more than 2k of code, you've got 6.6k of markup bloating it out for nothing.
     
    deathshadow, Jun 12, 2017 IP
    Rokis likes this.