The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm#

I tested the link on Internet Explorer and it looks fine, but when I try to zoom in Chrome or Firefox, the menu and content below gets all messed up.

Answer №1

It appears that each menu item has been placed in its own ul container:

<ul>
    <li>something</li>
</ul>
<ul>
    <li>something</li>
</ul>
<ul>
    <li>something</li>
</ul>

Consider using a single ul with multiple lis instead like this:

<ul>
    <li>something</li>
    <li>something</li>
    <li>something</li>
</ul>

To align them vertically, some CSS adjustments will be needed. It may require additional effort, but it is the correct approach. Trying to fix the appearance of a structurally flawed design is not ideal. :)

Check out this link for one way to achieve vertical alignment:

Answer №2

The CSS property of float was affecting the div with ID "text-content". To fix this, add the CSS rule clear:both to the same div. It is also recommended to use percentage values for widths instead of pixels, although it is not mandatory.

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

Entering text into the input field with the string "Foo"<[email protected]> is not functioning correctly

The text in my input is initially filled with this string "foo foo"<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2920200f29202061263b">[email protected]</a>>. However, after an insert, the string now l ...

Avoiding the application of a border-right to the final child of a div in CSS

Check out this custom HTML code: <div class="main"> <div class="parent"> <div class="child"> <span></span> <label></label> </div> <div class="child2"> // some html content </div> ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

The function in PHP does not arbitrarily return a boolean value

After creating a template file for WordPress, I encountered an issue with a function that I wrote. Despite ensuring that the two variables are different (as I confirmed by printing them), the function consistently returns true. Even after testing and attem ...

Understanding page navigation in PHP

Is there a way to validate the inputs on a given page, display error messages if any, and then move to the next page if the inputs are correct? How can this be achieved? <html> <head></head> <body> <?php // define variables an ...

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

Is there a way to personalize the appearance of a specific page title in my navigation menu?

I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...

Guide to making a language selection wrapper using a gist script

Currently, I have a Gist file that is written in various languages but all serve the same purpose. As a result, I am interested in developing a language selection feature similar to what is found in the Google docs documentation. https://i.stack.imgur.com ...

Removing an appended value in jQuery: A step-by-step guide

Here is my code that successfully appends the first item: After clicking the "show count" button, a pop-up dialog box will display the count. However, to remove the appended item or refresh the page, additional steps are required. function showcount() { ...

Is there a way to customize the color of the HR element in a Material-UI Select Field?

https://i.stack.imgur.com/DYeX7.png https://i.stack.imgur.com/CN0T6.png Hi there, I am currently working on a website and using a Select Field component from Material-UI. I am faced with the challenge of customizing the style to change the default light ...

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are ...

Converting a string to a date type within a dynamically generated mat-table

I am working on a mat-table that shows columns for Date, Before Time Period, and After Time Period. Here is the HTML code for it: <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay" > ...

The function was expecting an array for ordering, but instead received an object

I need help filtering my results based on their position. Whenever I try to use the orderBy function, it breaks the page because the result is not an array. How can I fix this issue? I'm currently stuck at this point. This is how I attempt to filter ...

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

Several components utilizing a popup module

I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...