[Solved] Line breaking in Firefox

[kerninglife]

I created a navigation bar by using lines in html. I have one vertical line that separates text from nag links but in Firefox the vertical line turns horizontal. Is there some browser compatibility code that keeps the line vertical in Firefox and other browsers?

http://codepen.io/kerninglife/pen/ieKoc?editors=110

[Paulie_D]

Oh…that’s a heck of a lot of code…in the first place…it would have been helpful just to reduce it down to just enough to demonstrate the problem.

Secondly, you’re going to an awful lot of trouble to create whole elements just to use as borders…is there some reason you can’t just apply borders to the actual link?

Oh…and using absolute positioning to position everything…not the best layout method.

[Senff]

-webkit-transform: only works in Webkit-based browsers. Firefox is Mozilla based, so it won’t recognize it. I believe you can just use transform instead.

[kerninglife]

My bad Paulie.

I’m not a developer and didn’t know you could create one outline on several nav items. Guess I’ll look up how to do that.

Thanks for the helpful info Senff.

[kerninglife]

Senff, do I use relative positioning? Or do I use display inline-block? I know I have been bashed for using absolute positioning before but I don’t code enough to remember what to use instead.

Also I took out “-webkit-” and while it fixed it in Firefox, it broke the line in safari.

Any HELP would be greatly appreciated.

[Senff]

Well, @Paulie_D is right, it’s a lot of code to just create lines.

Instead, you can get rid of them and apply lines to the elements/boxes/divs that you already have (instead of creating new elements):

Here’s an example to get you started with the idea: http://codepen.io/senff/pen/BuirG?editors=110

[kerninglife]

That’s awesome. Thanks for the help, that should be a lot easier to achieve my desired look for my footer too.

[kerninglife]

If I could ask one other question, based on how you created the lines for then nav, how would you go about creating angled lines? For instance if I wanted to have an “X” between nav links?

[Author]

Posts