The site is visually appealing in Firefox, but has a few issues on Chrome

I've encountered a common issue where my website displays perfectly in Firefox but looks terrible in Dreamweaver and Chrome. To fix it, I made live CSS edits in Firefox then copied them to Dreamweaver resulting in a mess.

Here's how it should look (and does look) in Firefox:

But in Chrome/Dreamweaver:

The top navigation bar appears vertical instead of horizontal and the footer is cramped in Chrome as well.

I'm sharing all my code hoping to resolve any conflicting elements that might be causing this mismatch.

How can the menu return to being horizontal and ensure the footer displays correctly on all browsers?

htmlcssgoogle-chromefirefoxnavigation

Answer №1

For optimal results, I suggest utilizing the Bootstrap framework as it provides excellent support for the latest mobile devices and browsers.

[http://www.bootply.com/4kihU2HqGf][1]


  [1]: http://getbootstrap.com/




    /* Custom CSS styles */
.logo {
  width: 210px;
}
.jumbotron {

}
h1.name {
    color: #125952;
    border-bottom: 4px solid #ffbc6b;
    margin-bottom: -19px;

}

.primary {
  background-color: #ffbc6b;
  border-radius: 1px;

}
.main-content {
  background-color: #ffbc6b;
}
.navbar-default .navbar-nav > li > a {
  color: #000;
}


.welcome {
  border-bottom: 4px solid #000;
  color: #000;
  padding-bottom: 8px;
}
p {
  color: #000;
  font-weight: 400px;
}

.columns {
  color: #000;
  border-bottom: 3px solid #000;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
section {
  background-color: #ffbc6b;
  padding: 10px;
}
.row {
  background-color: #ffbc6b;

}

.footer {
  background-color: #fff;
  margin: -12px 0px 0 -44px !important;

}

.navbar-default {
  border: none;
}

.copyright{
  margin-top: 10px;

}
    <div class="container">
  <header>
    <div class="logo">
      <h1 class="name">Katie Hunter</h1>
      <h3 class="subtitle">Graphic Designer</h3>
    </div><!-- end logo -->

    <nav class="navbar navbar-default primary">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">HOME :: <span class="sr-only">(current)</span></a></li>
        <li><a href="#">ABOUT ::</a></li>
        <li><a href="#">SERVICES ::</a></li>
        <li><a href="#">PORTFOLIO ::</a></li>
        <li><a href="#">BLOG ::</a></li>
        <li><a href="#">CONTACT ::</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


    <!-- end nav -->

  </header><!-- header -->

  <div class="jumbotron">
  <h1>Your images goes here!</h1>

  </div>

  <div class="container-fluid main-content">
    <div class="col-sm-12">
    <h1 class="welcome">Welcome</h1>
    <p><strong>lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
      when an unknown printer took a galley of type and scrambled it to make a type
      specimen book.
      It has survived not only five centuries, but also the leap into electronic 
      typesetting, remaining essentially unchanged. It was popularised in the 1960s with 
      the release of Letraset sheets containing Lorem Ipsum passages, and more 
      recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.

      It is a long established fact that a reader will be distracted by the 
      readable content of a page when looking at its layout. The point of using 
      Lorem Ipsum is that it has a more-or-less normal distribution of letters, as 
      opposed to using 'Content here, content here', making it look like readable 
      English. Many desktop publishing packages and web page editors now use Lorem
      Ipsum as their default model text, and a search for 'lorem ipsum' will
      uncover many web sites still in their infancy. Various versions have 
      evolved over the years, sometimes by accident, sometimes on purpose 
      (injected humour and the like).</strong></p>
    </div><!-- end of col -->


        <div class="col-sm-4">
          <h2 class="columns">SERVICES</h2>
          <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and scrambled it to make a type
            specimen book.</p>

        </div>

        <div class="col-sm-4">
          <h2 class="columns">SERVICES</h2>
          <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and scrambled it to make a type
            specimen book.</p>

        </div>

        <div class="col-sm-4">
          <h2 class="columns">SERVICES</h2>
          <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and scrambled it to make a type
            specimen book.</p>

        </div>
</div><!-- end of container-fluid -->



      <div class="container copyright">
        <div class="col-sm-6 ">
          <p>© COPYRIGHT 2015 Katie J Hunter - ALL RIGHTS RESERVED</p>
          <nav class="navbar navbar-default">
  <div class="container-fluid">




      <ul class="nav navbar-nav footer">
        <li><a href="#">HOME <span class="sr-only">(current)</span></a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>

      </ul>



  </div><!-- /.container-fluid --></nav></div>

Answer №2

Within your CSS, you have indicated #nav li, but the element you actually want to display inline is #navigation li

Additionally, you've set footer ul to have a margin-top: -37px, resulting in the unordered list being squished up against the copyright message.

P.S: Unfortunately, I can't view the images due to being behind a proxy server, but based on your description this should be the desired outcome.

Answer №3

Your HTML code is not valid. The <p> and <div> tags are being used as children of a lists element (ul).

To correct this issue, replace the code snippet below:

<ul><p>
<div id="navigation">
<li><a href="index.html" target="_blank">Home</a> :: </li>
<li><a href="about.html" target="_blank">About</a> ::</li> 
<li><a href="services.html" target="_blank">Services</a> :: </li>
<li><a href="portfolio.html" target="_blank">Portfolio</a> :: </li>
<li><a href="blog.html" target="_blank">Blog</a> :: </li> 
<li><a href="contact.html" target="_blank">Contact</a></li>
</div><!-- end navigation --></ul>

With this corrected version:

<div id="navigation">
    <ul>
        <li><a href="index.html" target="_blank">Home</a> :: </li>
        <li><a href="about.html" target="_blank">About</a> ::</li> 
        <li><a href="services.html" target="_blank">Services</a> :: </li>
        <li><a href="portfolio.html" target="_blank">Portfolio</a> :: </li>
        <li><a href="blog.html" target="_blank">Blog</a> :: </li> 
        <li><a href="contact.html" target="_blank">Contact</a></li>
    </ul>
</div><!-- end navigation -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for getting a browser to clear the cache specifically for the .html files on your website

After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...

htmlcachingbrowser

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

htmlcssweb

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Using a jQuery script, you can enable a back button functionality that allows users

I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initia ...

javascripthtmljquerycss

Whenever I try to execute watir-webdriver, I notice that the CSS file is

Currently, I am in the process of learning how to utilize watir-webdriver in ruby for my QA tasks. However, a recurring issue arises when running my watir-webdriver scripts on certain sites - some pages have missing CSS Files. This particular problem seems ...

cssrubyseleniumwatir

jQuery's event delegation feature fails to work in conjunction with AJAX requests

I'm currently facing issues with jQuery's on event delegation: Below is the code snippet I am working with: HTML portion: <body> <!-- Page Content Wrapper--> <div id="sb-site"> <div id="overlay">& ...

javascriptjqueryhtmlajax

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

Unable to make changes to inherited Jinja template in other files

This is the code from my base.html file: {%load static%} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...

htmldjangojinja2

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together: HTML <div id="sample"></div> CSS #sample { width:400px; height:400px; background-color:green; display:none; } #sample:hover{ background-color:red; } It's a hidden DIV tha ...

javascriptcsshoverstyles

Extending image across several rows within a form

I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it sta ...

htmlcsstwitter-bootstraptwitter-bootstrap-form

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

javascripthtmljquerycss

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

I have a row of 4 div elements aligned horizontally from left to right. Each div takes up 25% of the screen width. I am looking for a solution to make them wrap when the user resizes the screen instead of overlapping each other. .MenuSett { margin-to ...

htmlcss

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Encountering ERR_SSL_PROTOCOL_ERROR with ChromeDriver even with the --ignore-certificate-errors flag

I'm attempting to perform integration tests on a local host (without HTTPS) using Selenium with ChromeDriver. Chrome insists on an HTTPS certificate, but I discovered from this question that I can bypass this requirement by using the argument --ignor ...

pythonseleniumgoogle-chromeselenium-chromedriverselenium-grid

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

Concealed scrollbar only visible upon resizing the page

For my personal project, I was in need of a custom scrollbar plugin with basic inertia effects and custom images. After some research, I decided to go with mCustomScrollbar. The documentation provided was quite clear, and implementing the script was troub ...

jqueryhtmlscrollbarmcustomscrollbar

Choosing a dynamic dropdown option using jQuery and AJAX

I am facing an issue with a select box that is dynamically populated and should display information about a single option. The problem I am encountering is that the browser does not trigger a ':selected' event when I click on any of the options. ...

javascriptjqueryhtmlajax