The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> firefox vs microsoft edge
MindyT
post Jun 14 2016, 09:19 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 15 2016, 05:50 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jun 15 2016, 12:38 PM
Post #3


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 16 2016, 01:32 AM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jun 18 2016, 10:08 PM
Post #5


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 12:38 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC