firefox vs microsoft edge |
firefox vs microsoft edge |
MindyT |
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> |
pandy |
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.
|
MindyT |
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.
|
Darin McGrew |
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? |
MindyT |
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?
|
Lo-Fi Version | Time is now: 24th April 2024 - 12:25 AM |