Help - Search - Members - Calendar
Full Version: firefox vs microsoft edge
HTMLHelp Forums > Web Authoring > Web Site Functionality
MindyT
I know browsers handles html differently. In Microsoft Edge there are two rows of pictures which is what it should look like; however, in Firefox that's definitely not how it is displayed. Is there anyway to fix that?

CODE

<?php
require_once('functions.php');
?>  
<!doctype html>
<html>
<head>
<meta charset="utf-8/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">
    .cycle-slideshow {
        width:600px;
        margin-left:auto;
        margin-right:auto;
      }
    .firstRowServicesPics {
        float:left;
        margin-top:5%;
        margin-bottom:5%;
        margin-right:12%;     
    }
    
    .secondRowServicesPics {
        float:left;
        margin-bottom:5%;
    }
    figcaption {
        text-align:center;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<?php echo headerInfo();?>
<div class="cycle-slideshow">
    <img src="assets/minivan1.jpg">
    <img src="assets/tractorSunset1.jpg">
    <img src="assets/happyFamily1.jpg">
    <img src="assets/newerHouse1.jpg">
    <img src="assets/officeBuilding1.jpg">
</div>

     <div class="firstRowServicesPics" style="padding-left:5%;">
        <figure>
            <img src="assets/minivan1a.jpg">
                <figcaption>Auto Insurance </figcaption>
        </figure>
    </div>
     <div class="firstRowServicesPics">
        <figure>
            <img src="assets/newerHouse1a.jpg">
                <figcaption>Home Insurance </figcaption>
        </figure>        
    </div>
    <div class="firstRowServicesPics">
        <figure>
            <img src="assets/happyFamily1a.jpg">
            <figcaption>Personal Insurance </figcaption>
        </figure>    
     </div>

     <div class="secondRowServicesPics" style="padding-left:22%;">
        <figure>
            <img src="assets/tractorSunset1a.jpg">
                <figcaption>Farm Insurance </figcaption>
        </figure>
    </div>
     <div class="secondRowServicesPics">
        <figure>
            <img src="assets/officeBuilding1a.jpg" style="margin-left:50%;">
                <figcaption>Commercial Insurance </figcaption>
        </figure>        
    </div>
<?php echo footerInfo();?>
</body>
</html>
pandy
Can you link to the page so we can see it with images? We don't even have an idea about how big they are since you don't use width and height in your HTML. Please also explain what the problem is.
MindyT
You can view the page at http://www.mediaservicesunlimited.com/bixler/homepage.php. In Microsoft Edge and Internet Explorer below the slideshow there should be a row with 3 pictures and beneath that row there should be another row with two pictures. That's how it should look, but in Firefox the rows are way off.
Darin McGrew
The positioning in Firefox also shifts when I maximize and restore my browser window.

You seem to be using percentages for margins. What do you think these are percentages of? In other words, when you use "margin-top: 5%", what is that 5% of? And when you use "margin-right: 12%", what is that 12% of?
MindyT
in the external css I have the body height and width set to 100% so wouldn't the height and width be relative to that?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.