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

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

jquerycssheightrefreshbox

String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters. Here's my code: $maxBreakpoints = { ...

cssstringiterationstylus

clicking a table row will activate the *ngFor directive

Incorporating data from an API into a table, I have enabled the functionality for users to click on table rows in order to change the displayed data using background code: <tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)=" ...

htmlangulartypescript

Tips for designing resizable overlay divs

Looking to design an image with an overlay gradient and text, similar to this: <div> <img src="url"/> <div background-image="other url" background-repeat:repeat-x;> <h2>some text</h2> </div> </div> Some impor ...

jqueryhtmlcss

What is the best way to apply a background image to a DIV element using CSS

The main aim is to change the background image of a DIV using AJAX. $.getJSON("https://itunes.apple.com/search?term=" + searchTerm + '&limit=1' + '&callback=?', function(data) { $.each(data.results, fun ...

javascriptjqueryhtmlcss

Animate the downward movement of the parent of a specific element, while simultaneously animating the upward motion of all others that are

When clicking a button, I am trying to slide down only the ul elements that are parents of the li.newlist element, while sliding up all the others. Although I have successfully managed to slide down the desired elements, I am unsure how to define the secon ...

jqueryhtml

tips for remaining in modal window post form submission

I have a form within a modal window. I am using ajax to load content in the same modal window, but the issue is that it redirects to the main page after submitting the form. How can I ensure that the modal window stays open even after the form submission? ...

javascripthtmlajax

Accessing a text document from a specific folder

As a novice in the world of HTML and PHP, I am attempting to develop a script that can access a directory, display all text files within it, allow for editing each file, and save any changes made (all operations will be managed through an HTML form). Howev ...

phphtml

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

Tips on concealing and deactivating the fullscreen option in flowplayer

Could someone please assist me in resolving this issue? I've been attempting to hide the fullscreen button from the flowplayer, but so far, I haven't found a solution. Below is my JavaScript code: <script> $f("player", "flowplayer/flowpla ...

javascripthtmlflowplayer

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

My goal is to search for all hyperlinks on a webpage that contain an XML download link and download them in a continuous loop. When I click on these hyperlinks, a form pops up that needs to be completed before I can proceed with the download. However, I ...

pythoncssseleniumwebdrivervisibility

What is the best way to assign an identifier to a variable in this scenario?

script.js $('a').click(function(){ var page = $(this).attr('href'); $("#content").load(page); return false; }); main.html <nav> <a href="home.html">Home</a> <a href="about.html">About</a> < ...

javascriptjqueryhtml

Issue with Firefox web audio: source.start() function interrupted by synchronous ajax call not related to audio

The method below works perfectly in Chrome, but fails to function properly in Firefox 30 and 31. Even when I replace src.start(startTime) with src.start(0), the sound doesn't play as expected. However, interestingly, if I set a breakpoint and manually ...

ajaxgoogle-chromedebuggingfirefoxweb-audio-api

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button

Having trouble with my jQuery button code that is supposed to toggle associated checkboxes but ends up freezing the browser. I am in need of the following functionalities: 1) Clicking on "select all" should select all checkboxes. 2) Clicking on "select all ...

javascriptjqueryhtml

How to modify the link to ensure that a particular tab is already selected when the page loads

How to Add Script for Linking to Rawdata Tab I need help loading specific page content with the Rawdata tab open instead of the Summary tab. What code should I add to the link to ensure that the page loads with "Rawdata"? https://i.stack.imgur.com/avETs. ...

htmlangularjshyperlinkangular-ui-bootstrap

Choosing and Duplicating Text in Angular

I'm attempting to give the user the ability to select a paragraph and copy it by clicking a button. However, my current code is not working as expected. I initially tried importing directives but encountered errors, prompting me to try a different met ...

javascripthtmlangulartypescript