Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Question

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Looking to create a dynamic navigation bar that adjusts to different screen sizes? On the left side, you want an undetermined number of links, while on the right side there should be a search button.

The challenge is to ensure that all links have equal width, regardless of how many there are, and that the search button is always 50px wide. This responsiveness kicks in when the screen width falls below 768px.

To tackle this, I've employed CSS properties like table-layout: fixed, along with table-cell and table-row, depending on the screen width.

While Firefox and Chrome seem to handle it well, Safari seems to struggle at times, especially when transitioning between wide and narrow screens (elements shifting between table-cells and table-rows).

Any suggestions on how to resolve this issue or improve the design? Could this possibly be a bug specific to Safari 6.0.2?

Check out the JSFiddle Demo:
here.

html css

Answer 1

Answer №1

It seems like using Javascript is unnecessary for this issue.

I simply included a :hover style for the form width and another :hover style for the input, which resolves the problem in Safari. In Safari, hovering over the text input was causing the form to return to a width of 50px (if that was your concern).

#searchform:hover {
width:250px;
}

#searchform:hover input#s {
display: inline;
}

You can test my solution on jsfiddle

JS Fiddle

Answer 2

It seems like using Javascript is unnecessary for this issue.

I simply included a :hover style for the form width and another :hover style for the input, which resolves the problem in Safari. In Safari, hovering over the text input was causing the form to return to a width of 50px (if that was your concern).

#searchform:hover {
width:250px;
}

#searchform:hover input#s {
display: inline;
}

You can test my solution on jsfiddle

JS Fiddle

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Answer №1

Similar questions

Having trouble accessing a fully loaded Wordpress remotely through Wamp

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Get both div tags within a single find_all function call in Beautiful Soup

Is there a way to locate ComputedStyle elements using Nokogiri?

Is there a way to produce random colors using this SCSS function?

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

Taking steps when a number is enclosed within a span

Anomaly with Responsive Images in Internet Explorer 7

What is the best way to incorporate three divs into a single line while maintaining a responsive design

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

Is it possible to utilize the <hgroup> element with various <h> heading levels?

Is it possible to include the contents of an .ics file and provide a link to it in HTML, all without relying on JavaScript?

``There is an issue with elements not remaining within the boundaries of the div that has

Looking to dynamically generate HTML tags using jQuery and JSON?

seeking a solution to simulate a variety of web browsers

Creating a Website that Adapts to Different Browser Sizes: Tips and Tricks

Exploring the use of dictionaries within Django templates

Is there a way to produce a unique color using Stylus CSS?

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Sending chosen choice to controller method