How can i fix the tab overlapping when i change the width of the url bar with #urlbar-container [focused]?
I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it.
Fixed width of the url bar when #urlbar-container is not focused:
http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png
Fixed width of the url bar when #urlbar-container [focused]:
http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png
This is the css i have for the url bar at the moment:
#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar-container [focused] {max-width:500px!important;}
#urlbar-container [focused] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}Modified by cor-el
All Replies (7)
What method (code) did you use to get the Tab bar displaying in the space used for the Navigation Toolbar (location bar)?
The Tab bar should be displayed above the Navigation Toolbar.
Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
- Do NOT click the Reset button on the Safe Mode start window.
I did it with this addon: https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/
I modify the CSS through this addon: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=search
I have the default theme set and turned off hardware aceleration, but the bug still persists. I can't use Safe Mode since i'm doing this customisation through addons.
I still don't know how to solve this customization problem.
Try this code:
#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar[focused="true"] {max-width:500px!important;}
#urlbar[focused="true"] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}
The same happens:
When not in focus: http://oi59.tinypic.com/28armoj.jpg
When in focus: http://oi59.tinypic.com/2zdq0yf.jpg
Have you tried asking about that in the CTR support thread?
http://forums.mozillazine.org/viewtopic.php?f=48&t=2773133
I tried, but I don't think the mods allowed it to post.
Edit: NVM, it just took them a while.
Modified by derek89